jQuery实现鼠标经过图片变亮其他变暗效果
以下是完整源代码:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>jQuery实现鼠标经过图片变亮效果</title><basetarget="_blank"/> <styletype="text/css"> a{color:white;} body{background:#000;} body,div,ul,li,img{padding:0;margin:0;border:0;list-style:none;} .hovertreebox{width:630px;border:1pxsolid#ccc;margin:10pxauto;overflow:hidden;padding:10px0010px;} .hovertreeboxli{width:200px;height:186px;float:left;margin-right:10px;margin-bottom:10px;cursor:pointer;} </style> <scripttype="text/javascript"src="jquery/jquery-1.11.2.min.js"></script> <scripttype="text/javascript"> $(function(){ $('.hovertreeboxli').mouseover(function(e){ $(this).siblings().stop().fadeTo(500,0.4); }); $('.hover'+'treeboxli').mouseout(function(e){ $(this).siblings().stop().fadeTo(500,1); }); }) </script> </head> <body> <divstyle="color:white">jQuery突出图片列表中鼠标经过项 <br/></div> <divclass="hovertreebox"id="hovertreelist"> <ul> <li><imgsrc="/images/01.jpg"width="200"height="186"/></li> <li><imgsrc="/images/02.jpg"width="200"height="186"/></li> <li><imgsrc="/images/03.jpg"width="200"height="186"/></li> <li><imgsrc="/images/04.jpg"width="200"height="186"/></li> <li><imgsrc="/images/05.jpg"width="200"height="186"/></li> <li><imgsrc="/images/06.jpg"width="200"height="186"/></li> </ul> </div> </body> </html>
演示地址:http://demo.jb51.net/js/2014/jquery-images-blba/
特效下载:https://www.nhooo.com/jiaoben/264211.html
以上所述就是本文的全部内容了,希望大家能够喜欢。