帶蒙版的手風琴製作

帶蒙版的手風琴效果
1、這個手風琴增加了蒙版效果,看起來更好看
2、代碼採用了jquery的方法,比不帶手風琴的代碼看起來更美觀,更容易理解,整體思路可以參考不帶手風琴的思路。

舉例:

<!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;
		}
		.carousel ul li div.mask {
			position: absolute;
			width: 560px;
			height: 300px;
			left: 0;
			top: 0;
			background-color: rgba(0, 0, 0, .5);
		}
	</style>
</head>
<body>
	<div class="carousel" id="carousel">
		<ul>
			<li class="no0" id="no0"><div class="mask"></div><img src="images/0.jpg" alt=""></li>
			<li class="no1" id="no1"><div class="mask"></div><img src="images/1.jpg" alt=""></li>
			<li class="no2" id="no2"><div class="mask"></div><img src="images/2.jpg" alt=""></li>
			<li class="no3" id="no3"><div class="mask"></div><img src="images/3.jpg" alt=""></li>
			<li class="no4" id="no4"><div class="mask"></div><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 $carousel = $("#carousel");

	// 添加鼠標進入事件
	$("li").mouseenter(function() {
		// 防流氓
		$("li").stop(true);
		// 定義變量用於保存觸發事件的序號
		var idx = $(this).index();
		// console.log(idx);

		// 小於或者等於當前序號的圖片應該往左移動 與85相關
		$("li:lt(" + (idx + 1) + ")").each(function(i) {
			// console.log(i);
			$(this).animate({"left": 85 * i}, 500);
		})

		// 大於idx的圖片應該往右移動 並且與560相關
		$("li:gt(" + idx + ")").each(function(i) {
			// console.log(i);
			$(this).animate({"left": 560 + 85 * (idx + i)}, 500);
		})

		// 當前蒙版消失
		$(this).children(".mask").stop(true).fadeOut(500);
		// 其他蒙版恢復
		$(this).siblings().children().stop(true).fadeIn(500);
	})

	// 添加鼠標離開事件
	$carousel.mouseleave(function() {
		// 防流氓
		$("li").stop(true);
		// 循環將所有的li 恢復原狀
		$("li").each(function(i) {
			$(this).animate({"left": 180 * i}, 500);
		})
		// 所有蒙版恢復
		$(".mask").stop(true).fadeIn(500);
	})
	</script> 
</body>
</html>

提示:
1、請各位學習的同學,學習其中的思路,多加練習,做出總結。這樣才能記憶的更加深刻,有問題歡迎留言。
2、jquery的包已經上傳到資源中,可以自行下載,相關的圖片素材,我回頭打包上傳到資源中。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章