不带蒙版的手风琴制作-CSDN博客

本文链接：https://blog.csdn.net/qq_36982349/article/details/83004119

不带蒙版的手风琴效果

分析：
我们定义手风琴图的宽为900px, 里面有5张图片，每一张的图片的间隔应该是180px。
当鼠标移入图片的时候，当前图片展开（560px）, 剩余的四张图片压缩，每一张图片的间隔应该是85px。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.carousel {
			position: relative;
			width: 900px;
			height: 300px;
			margin: 50px auto;
			border: 1px solid blue;
			overflow: hidden;
		}
		.carousel ul li {
			position: absolute;
			width: 560px;
			height: 300px;
			top: 0;
			left: 0;
		}
		.carousel ul li.no1 {
			left: 180px;
		}
		.carousel ul li.no2 {
			left: 360px;
		}
		.carousel ul li.no3 {
			left: 540px;
		}
		.carousel ul li.no4 {
			left: 720px;
		}
	</style>
</head>
<body>
	<div class="carousel" id="carousel">
		<ul>
			<li class="no0" id="no0"><img src="images/0.jpg" alt=""></li>
			<li class="no1" id="no1"><img src="images/1.jpg" alt=""></li>
			<li class="no2" id="no2"><img src="images/2.jpg" alt=""></li>
			<li class="no3" id="no3"><img src="images/3.jpg" alt=""></li>
			<li class="no4" id="no4"><img src="images/4.jpg" alt=""></li>
		</ul>
	</div>
	<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
	<script type="text/javascript">
	// 获取元素
	var $no0 = $("#no0");
	var $no1 = $("#no1");
	var $no2 = $("#no2");
	var $no3 = $("#no3");
	var $no4 = $("#no4");
	var $carousel = $("#carousel");

	// 添加鼠标移入事件
	$no0.mouseenter(function() {
		// 防流氓
		$("li").stop(true);
		$no1.animate({"left": 560}, 500);
		$no2.animate({"left": 560 + 85}, 500);
		$no3.animate({"left": 560 + 85 * 2}, 500);
		$no4.animate({"left": 560 + 85 * 3}, 500);
	})

	// no2添加鼠标移入事件
	$no1.mouseenter(function() {
		// 防流氓
		$("li").stop(true);
		$no1.animate({"left": 85}, 500);
		$no2.animate({"left": 560 + 85}, 500);
		$no3.animate({"left": 560 + 85 * 2}, 500);
		$no4.animate({"left": 560 + 85 * 3}, 500);
	})

	// no2添加鼠标移入事件
	$no2.mouseenter(function() {
		// 防流氓
		$("li").stop(true);
		$no1.animate({"left": 85}, 500);
		$no2.animate({"left": 85 * 2}, 500);
		$no3.animate({"left": 560 + 85 * 2}, 500);
		$no4.animate({"left": 560 + 85 * 3}, 500);
	})

	// no3添加鼠标移入事件
	$no3.mouseenter(function() {
		// 防流氓
		$("li").stop(true);
		$no1.animate({"left": 85}, 500);
		$no2.animate({"left": 85 * 2}, 500);
		$no3.animate({"left": 85 * 3}, 500);
		$no4.animate({"left": 560 + 85 * 3}, 500);
	})

	// no4添加鼠标移入事件
	$no4.mouseenter(function() {
		// 防流氓
		$("li").stop(true);
		$no1.animate({"left": 85}, 500);
		$no2.animate({"left": 85 * 2}, 500);
		$no3.animate({"left": 85 * 3}, 500);
		$no4.animate({"left": 85 * 4}, 500);
	})


	// 给carousel添加鼠标离开事件
	$carousel.mouseleave(function() {
		// 防流氓
		$("li").stop(true);
		$no1.animate({"left": 180}, 500);
		$no2.animate({"left": 180 * 2}, 500);
		$no3.animate({"left": 180 * 3}, 500);
		$no4.animate({"left": 180 * 4}, 500);

	})
	</script> 
</body>
</html>

注意事项：
1、此代码是不带蒙版的手风琴效果，而且代码是一般思维做的，如果需要做手风琴效果的同学请参考带蒙版的手风琴效果代码。
2、所需的jquery包代码在上传资料中下载。