html鼠标感应图片,jQuery实现的感应鼠标悬停图片色彩渐显效果

本文实例讲述了jQuery实现的感应鼠标悬停图片色彩渐显效果。分享给大家供大家参考。具体实现方法如下：

超个性的感应鼠标悬停图片色彩渐显效果

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%;

}

$(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 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();

});

});

预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。

•  

  Sunflowa Media

希望本文所述对大家的jQuery程序设计有所帮助。