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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
js实现两点之间画线的方法
May 12 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
javascript删除数组元素的七个方法示例
Sep 09 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
解决Layui 表格自适应高度的问题
Nov 15 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 VS ASP
2006/10/09 PHP
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
javascript 函数调用规则
2009/08/26 Javascript
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
js实现图片局部放大效果详解
2019/03/18 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
异地年检委托书范本
2014/09/24 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
党支部四风整改方案
2014/10/25 职场文书
节约用电倡议书
2015/04/28 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
python实现简单的聊天小程序
2021/07/07 Python