一、设计思路
高亮显示案例,主要是对之前的jQuery效果做的巩固。它的主要思路是当点击其中一个图片时,其他的图片都变暗。主要是一个大盒子里面放着许多小的li。通过改变他们之间的透明度来实现效果。
二、代码
css
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.wrap{
width: 676px;
height: 510px;
overflow: hidden;
background: black;
}
.wrap ul li{
height: 220px;
float: left;
border: 2px solid black;
}
.wrap img{
border: 0;
display: block;
}
jQuery
$(function(){
//鼠标进入时,其他的li标签透明度为0.5
$(".wrap li").hover(function(){
$(this).siblings().stop().fadeTo(400,0.5);
},function(){
//鼠标离开,其他li 透明度改为1
$(this).siblings().stop().fadeTo(400,1);
})
})
html
<div class="wrap">
<ul>
<li>
<a href="#"><img src="img/a.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/b.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/c.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/d.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/e.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/f.jpg" alt=""></a>
</li>
</ul>
</div>
三、实现效果