jQuery实现的感应鼠标悬停图片色彩渐显效果
更新时间：2015年03月03日 15:29:39 作者：代码家园
这篇文章主要介绍了jQuery实现的感应鼠标悬停图片色彩渐显效果,涉及jQuery中hover、find、css等方法的使用技巧,需要的朋友可以参考下
本文实例讲述了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>
<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程序设计有所帮助。
相关文章
jquery实现异步文件上传ajaxfileupload.js
这篇文章主要为大家详细介绍了jquery实现异步文件上传ajaxfileupload.js，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
这篇文章主要为大家介绍了jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项,需要的朋友可以参考下2010-12-12
这篇文章主要介绍了在JavaScript中重写jQuery对象的方法,在某些情况下jQuery无法满足应用开发的时候可以采用javascript重写jQuery方法来满足功能的实现,需要的朋友可以参考下2014-08-08
这篇文章主要介绍了jQuery语法小结(超实用)，涉及到jquery语法相关知识，对jquery语法相关知识感兴趣的朋友一起学习吧2015-12-12
下面小编就为大家带来一篇浅谈jquery中使用canvas的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
jRumble是jquery的插件，可以让你选择的元素抖动。 调用时只需一句代码即可，有些抖动效果还挺可爱，可自定义的抖动效果，十分的炫酷，有需要的小伙伴可以参考下。2015-06-06
bxSlider特性1.充分响应各种设备，适应各种屏幕；2.支持多种滑动模式，水平、垂直以及淡入淡出效果；3.支持图片、视频以及任意html内容；4.支持触摸滑动；5.支持Firefox，Chrome，Safari，iOS，Android，IE7+，下面我们就来详细探讨下吧。2015-04-04
右下角弹出提示框想必大家都有见到过吧，其实有实现方法有很多，在本文为大家详细介绍在jquery中具体的实现，感兴趣的朋友可以了解下2013-10-10
jquery的分页代码，是结合数据库实现的， 这里只给出核心jquery代码。其它的大家可以发挥下。2010-06-06
本篇文章小编为大家介绍，基于JQuery 选择器使用说明介绍。需要的朋友参考下2013-04-04
最新评论