jQuery实现的感应鼠标悬停图片色彩渐显效果


Posted in Javascript onMarch 03, 2015

本文实例讲述了jQuery实现的感应鼠标悬停图片色彩渐显效果。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>超个性的感应鼠标悬停图片色彩渐显效果</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<!--把下面代码加到<head>与</head>之间-->

<style type="text/css">

ul.gallery {

    width: 750px; /*--Adjust width according to your scenario--*/

    list-style: none;

    margin: 0; padding: 0;

}

ul.gallery li {

    float: left;

    margin: 10px 0 10px 25px; 

    padding: 0;

    text-align: center;

    border: 1px solid #ccc;

    -moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/

    -khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/

    -webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/

    display: inline; /*--Gimp Fix aka IE6 Fix - Fixes double margin bug--*/

}

ul.gallery li a.thumb {

    width: 336px; /*--Width of image--*/

    height: 240px; /*--Height of image--*/

    border-bottom: 1px solid #ccc;

    cursor: pointer;

}

ul.gallery li span { /*--Used to crop image--*/

    width: 336px;

    height: 240px;

    overflow: hidden;

    display: block;

}

ul.gallery li a.thumb:hover {

    background: #333; /*--Hover effect for browser with js turned off--*/

}

ul.gallery li h2 {

    font-weight: normal;

    margin: 0; 

    padding: 10px;

    background: #f0f0f0;

    border-top: 1px solid #fff; /*--Subtle bevel effect--*/

}

ul.gallery li a { 

     text-decoration: none; 

     color: #777; 

     display: block;

     font-size: 140%;

}

</style>

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    $("ul.gallery li").hover(function() { //On hover...

        var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'

        //Set a background image(thumbOver) on the <a> tag - Set position to bottom

        $(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});

        //Animate the image to 0 opacity (fade it out)

        $(this).find("span").stop().fadeTo('normal', 0 , function() {

            $(this).hide() //Hide the image after fade

        });

    } , function() { //on hover out...

        //Fade the image to full opacity 

        $(this).find("span").stop().fadeTo('normal', 1).show();

    });

});

</script>

</head>

<body>

预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。<br>

<!--把下面代码加到<body>与</body>之间-->

<ul class="gallery">

 <li>

  <a href="#" class="thumb"><span><img src="/html/txdm_2/images/20100904/336240.jpg" alt=""></span></a>

  <h2><a href="#">Sunflowa Media</a></h2>

 </li>

</ul>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
JS分页效果示例
Oct 11 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
详解Angular-Cli中引用第三方库
May 21 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
简单了解Vue computed属性及watch区别
Jul 10 Javascript
JavaScript实现京东快递单号查询
Nov 30 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 #Javascript
分享一则JavaScript滚动条插件源码
Mar 03 #Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
Mar 03 #Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 #Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 #Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 #Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 #Javascript
You might like
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
Python入门篇之条件、循环
2014/10/17 Python
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
Python itertools.product方法代码实例
2020/03/27 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
通过代码实例了解Python异常本质
2020/09/16 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
请解释virtual关键字的含义
2015/06/17 面试题
物业管理公司实习生自我鉴定
2013/09/19 职场文书
怎样有效的进行自我评价
2013/10/06 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
涨价通知怎么写
2015/04/23 职场文书