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 Ajax文件上传(php)
Jun 16 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 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
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
python实现的解析crontab配置文件代码
2014/06/30 Python
Python生成pdf文件的方法
2014/08/04 Python
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
python获取当前日期和时间的方法
2015/04/30 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
学python安装的软件总结
2019/10/12 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
python socket 聊天室实例代码详解
2019/11/14 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
阿波罗盒子:Apollo Box
2017/08/14 全球购物
数据库基础的一些面试题
2012/02/25 面试题
教育课题研究自我鉴定范文
2013/12/28 职场文书
教师个人年度总结
2015/02/11 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang