【前端】javascript+jquery實現手風琴式的滾動banner或產品展現圖

時間 2019-12-11

標籤前端 javascript+jquery javascript jquery 實現手風琴滾動 banner 產品展現欄目 JavaScript 简体版

原文原文鏈接

實現效果javascript

實現步驟css

// 鼠標放入到li中該盒子變寬，其餘盒子變窄，鼠標移開大盒子，恢復原樣
// 實現步驟
// 1. 給li添加背景
// 2. 綁定onmouseover事件，鼠標放入到li中，該盒子變寬，其餘盒子變窄
// 3. 移開盒子，恢復原樣html

實現代碼java

<!DOCTYPE html>
<html>
<head>
	<title>手風琴式圖片展現列表</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		body{
			background-color: #2f2f2f;
		}
		div{
			width: 1000px;
			margin: 100px auto;
			box-shadow: 1px 1px 20px #000;
			overflow: hidden;
		}
		div ul{
			width: 1300px;
			list-style: none;
		}
		div ul li{
			width: 200px;
			height: 150px;
			float: left;
		}
	</style>    
	<script type="text/javascript" src="jquery1.0.0.1.js"></script>
	<!-- 引入jQuery -->
	<script type="text/javascript">
	// 鼠標放入到li中該盒子變寬，其餘盒子變窄，鼠標移開大盒子，恢復原樣
	// 實現步驟
	// 1. 給li添加背景
	// 2. 綁定onmouseover事件，鼠標放入到li中，該盒子變寬，其餘盒子變窄
	// 3. 移開盒子，恢復原樣

	window.onload = function(){
		var div = document.getElementsByTagName("div")[0];
		var liArr = div.getElementsByTagName("li");
		// 1. 給li添加背景,使用background屬性
		for(var i=0; i<liArr.length; i++){
			liArr[i].style.background = "url(images/0"+(i+1)+".jpg) no-repeat";

			// 步驟 2
			liArr[i].onmouseover = function(){
				// 排他思想
				for(var j=0; j<liArr.length; j++){
					// 引用框架實現寬度變窄
					animate(liArr[j], {"width":140});
					// 注意：jQuery3須要寫成 liArr[j].animate({""})的寫法！！！
				}
				// 設置觸發的盒子的寬度
				animate(this, {"width":490});
			}
		}

		// 步驟 3
		div.onmouseout = function(){
			for(var j=0; j<liArr.length; j++){
				// 引用框架實現寬度變窄
				animate(liArr[j],{"width":200});
			}
		}
	}
</script>n

</head>
<body>
<div>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
</body>
</html>