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
以上所述就是本文的全部内容了,希望大家能够喜欢。