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 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
javascript 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
javascript中利用数组实现的循环队列代码
Jan 24 Javascript
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
vue实现Toast组件轻提示
Apr 10 Vue.js
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中feof()函数实例测试
2014/08/23 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
python函数的5种参数详解
2017/02/24 Python
使用python实现BLAST
2018/02/12 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
浅谈Python type的使用
2019/11/19 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
企业管理培训感言
2014/01/27 职场文书
机房搬迁方案
2014/05/01 职场文书
退休欢送会主持词
2015/07/01 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
MySQL空间数据存储及函数
2021/09/25 MySQL