jQuery实现的感应鼠标悬停图片色彩渐显效果
本文实例讲述了jQuery实现的感应鼠标悬停图片色彩渐显效果。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>超个性的感应鼠标悬停图片色彩渐显效果</title> <metahttp-equiv="content-type"content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head>之间--> <styletype="text/css"> ul.gallery{ width:750px;/*--Adjustwidthaccordingtoyourscenario--*/ list-style:none; margin:0;padding:0; } ul.galleryli{ float:left; margin:10px010px25px; padding:0; text-align:center; border:1pxsolid#ccc; -moz-border-radius:3px;/*--CSS3RoundedCorners--*/ -khtml-border-radius:3px;/*--CSS3RoundedCorners--*/ -webkit-border-radius:3px;/*--CSS3RoundedCorners--*/ display:inline;/*--GimpFixakaIE6Fix-Fixesdoublemarginbug--*/ } ul.gallerylia.thumb{ width:336px;/*--Widthofimage--*/ height:240px;/*--Heightofimage--*/ border-bottom:1pxsolid#ccc; cursor:pointer; } ul.gallerylispan{/*--Usedtocropimage--*/ width:336px; height:240px; overflow:hidden; display:block; } ul.gallerylia.thumb:hover{ background:#333;/*--Hovereffectforbrowserwithjsturnedoff--*/ } ul.gallerylih2{ font-weight:normal; margin:0; padding:10px; background:#f0f0f0; border-top:1pxsolid#fff;/*--Subtlebeveleffect--*/ } ul.gallerylia{ text-decoration:none; color:#777; display:block; font-size:140%; } </style> <scripttype="text/javascript"src="/js/jquery-1.4.2.min.js"></script> <scripttype="text/javascript"> $(document).ready(function(){ $("ul.galleryli").hover(function(){//Onhover... varthumbOver=$(this).find("img").attr("src");//Getimageurlandassignitto'thumbOver' //Setabackgroundimage(thumbOver)onthe<a>tag-Setpositiontobottom $(this).find("a.thumb").css({'background':'url('+thumbOver+')no-repeatcenterbottom'}); //Animatetheimageto0opacity(fadeitout) $(this).find("span").stop().fadeTo('normal',0,function(){ $(this).hide()//Hidetheimageafterfade }); },function(){//onhoverout... //Fadetheimagetofullopacity $(this).find("span").stop().fadeTo('normal',1).show(); }); }); </script> </head> <body> 预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。<br> <!--把下面代码加到<body>与</body>之间--> <ulclass="gallery"> <li> <ahref="#"class="thumb"><span><imgsrc="/html/txdm_2/images/20100904/336240.jpg"alt=""></span></a> <h2><ahref="#">SunflowaMedia</a></h2> </li> </ul> </body> </html>
希望本文所述对大家的jQuery程序设计有所帮助。