jQuery效果高亮显示案例

一、设计思路

高亮显示案例，主要是对之前的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>

三、实现效果