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设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 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 Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
PHP获取表单所有复选框的值的方法
2014/08/28 PHP
PHP的几个常用加密函数
2016/02/03 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
js模糊查询实例分享
2016/12/26 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
js实现烟花特效
2020/03/02 Javascript
简单讲解Python中的闭包
2015/08/11 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
Django中Middleware中的函数详解
2019/07/18 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
2014学年自我鉴定
2014/02/23 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
2015年除四害工作总结
2015/07/23 职场文书
教务处干事工作总结
2015/08/14 职场文书