jq手风琴效果

最新推荐文章于 2025-06-03 09:11:21 发布

原创最新推荐文章于 2025-06-03 09:11:21 发布 · 875 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jqurey #github

jqurey 专栏收录该内容

5 篇文章

订阅专栏

手风琴只要设定好li的left值，其他的就是事件，动画基本没什么问题；

首先要设定：父级的宽度=父级原先的宽度+（li.length-1）*设定的右侧展示宽度。

然后再设定：li的left值=父级的宽度-(li的长度-当前li的索引值)*设定的右侧展示宽度。

github地址

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		
		 .box{
		 	width: 600px;
			height: 400px;
			margin: 200px auto;
			overflow: hidden;
			position: relative;
		}
		 .box li{
			width: 600px;
			height: 400px;
			position: absolute;
			left: 0;
			top: 0;
		}
		.box li img{
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
		<ul class="box">
			<li><img src="images/1.jpg" alt=""></li>
			<li><img src="images/2.jpg" alt=""></li>
			<li><img src="images/3.jpg" alt=""></li>
			<li><img src="images/4.jpg" alt=""></li>
			<li><img src="images/5.jpg" alt=""></li>
			<li><img src="images/6.jpg" alt=""></li>
		</ul>
</body>
<script src="../jquery-1.7.2.js"></script>
<script>
;(function($){
		var num = 40;                   //设定li右侧剩余宽度
		var $li = $('.box li');			
		var $box = $('.box');
		var w = $box.width()+($li.length-1)*num; //设定父级宽度
		$box.width(w);							//修改父级原来宽度
		$li.each(function(index, el) {			//循环li
			$li.eq(index).css({					//设定所有li的left值
				'left':$box.eq(0).width()-($li.length-index)*num
			});
			$li.eq(0).css('left',0);		//第一个li的left值设定为0；
		});

		$li.mouseover(function(){				//添加事件
			var $index = $(this).index();		//获取当前li索引值
			$li.each(function(index, el) {		//循环li
				if($index>=index){				//判断当前li是第几个左侧向左
					$li.eq(index).animate({
						'left':index*num
					});
				}else{
					$li.eq(index).animate({		//右侧向右
						'left':$box.eq(0).width()-($li.length-index)*num
					});
				}	
			});
		});
})(jQuery);
	

</script>
</html>