This article illustrates the color fade effect of the sensing mouse hover picture implemented by jquery. Share to everyone for your reference. The implementation methods are as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Super Personality induction mouse hover picture color fade effect </title>
<meta http-equiv= "Content-type" content= "text/html;charset=gb2312" >
<!--Add the following code to <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 URLs 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>
<body>
Preview the effect of the bottom left corner will be prompted with errors, and can not see the effect, refresh to see the effect of, of course, in the actual use, there will not be such a problem. <br>
<!--Add the following code to <body> and </body>-->
<ul class= "Gallery" >
<li>
<a href= "#" class= "thumb" ><span></ Span></a>
</li>
</ul>
</body>
I hope this article will help you with your jquery programming.
