JQ------百叶窗

每个图片在mouseenter之后都会去固定的位置：

比mousenter时的图片位置大的：------>右移动

比mousenter时的图片位置小的：<------左移动

html：

<div class="shutter">
		<ul>
			<li class="no0">
				<a href="">
					<img src="images/0.jpg" alt="" />
				</a>
			</li>
			<li class="no1">
				<a href="">
					<img src="images/1.jpg" alt="" />
				</a>
			</li>
			<li class="no2">
				<a href="">
					<img src="images/2.jpg" alt="" />
				</a>
			</li>
			<li class="no3">
				<a href="">
					<img src="images/3.jpg" alt="" />
				</a>
			</li>
			<li class="no4">
				<a href="">
					<img src="images/4.jpg" alt="" />
				</a>
			</li>
		</ul>
	</div>

jq：

imgwidth:图片宽

sumwidth:显示的总宽

imgslength:图片个数

position = (sumwidth-imgwidth)/imglength //除去图片剩下的图片占得位置

$lis = $(".shutter li");

		$lis.mouseenter(function() {
			$lis.stop(true);//截流
			index = $(this).index();//获取mouseenter时的图片位置
			$lis.each(function(i) {
				if(i <= index){
					$(this).animate({"left":position * i},500);
				}
				else{ 
					$(this).animate({"left":imgwidth + postion * (i-1)},500);
				}
			});
		});
		$lis.mouseleave(function() {
			$lis.each(function(i) {
				$(this).animate({"left":(sumwidth / imgslength)* i},500);
 	});
		});

实例图片：