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 相关文章推荐
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 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下的权限算法的实现
2007/04/28 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
javascript 动态生成私有变量访问器
2009/12/06 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
pip install urllib2不能安装的解决方法
2018/06/12 Python
用python写PDF转换器的实现
2020/10/29 Python
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
英文自我鉴定
2013/12/10 职场文书
学习十八届三中全会精神实施方案
2014/02/17 职场文书
员工工作及收入证明
2014/10/28 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
上甘岭观后感
2015/06/10 职场文书
vue实现在data里引入相对路径
2022/06/05 Vue.js