jQuery手风琴特效(含完整源码)

本博文源于jQuery基础，旨在实现手风琴特效。

实验效果

鼠标移动，图片变大，鼠标离开，图片变小

实验步骤

测试用图

文件结构如下

html结构

这个特效html结构非常简单的，只需要把图片发进去就行了，每个图片li

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

css结构

图片把盒子五等份，然后左浮动，绝对定位。

* {
	margin: 0;
	padding: 0;
}
body {
	background-color: #eee;
}
.accordion {
	width: 900px;
	height: 300px;
	border: 1px solid black;
	margin: 100px auto;
	position: relative;
	overflow: hidden;
}
.accordion ul {
	list-style: none;
}
.accordion ul li {
	position: absolute;
}
.no0{
	left: 0;
}
.no1{
	left: 180px;
}
.no2{
	left: 360px;
}
.no3{
	left: 540px;
}
.no4{
	left: 720px;
}
.mask {
	position: absolute;
	width: 500px;
	height: 300px;
	background-color: black;
	top: 0;
	left: 0;
	opacity: 0.6;
}

js代码

书写jquery代码，要想明白实现什么效果，分为两种结果，一个鼠标放上去，一个是鼠标离开。鼠标移上去，只有一个图片变大，另外图片变小。鼠标离开，所有图片·变成变成原位
注意jquery路径

<script type="text/javascript" src="jslib/jquery-3.3.1.js"></script>
<script type="text/javascript">
	var during = 300;
	$(".accordion ul li").mouseenter(function() {
	  
	    var idx = $(this).index();
	    $(".accordion ul li:lt(" + (idx + 1) + ")").each(function(i) {
	        $(this).stop(true).animate({
	            "left": 85 * i
	        },
	        during);
	    });
	
	    $(".accordion ul li:gt(" + idx + ")").each(function(i) {
	        $(this).stop(true).animate({
	            "left": 560 + 85 * (idx + i)
	        },
	        during);
	    });
	
	    //自己碰到的元素变量，其他元素变暗
	    $(this).children(".mask").stop(true).fadeOut();
	    $(this).siblings().children(".mask").stop(true).fadeIn();
	});
	$(".accordion").mouseleave(function() {
	    $(".accordion ul li").each(function(i) {
	        $(this).animate({
	            "left": 180 * i
	        },
	        during);
	    });
	
	    $(".mask").fadeIn();
	});
</script>

总结

本特效所有图片叠加，鼠标指针移动一张图片，图片变大，鼠标离开，图片原位。因此mouse事件监听非常重要！