【前端】javascript+jquery实现手风琴式的滚动ba…

2018-06-24 00:40:18来源：未知阅读 ()

实现效果

实现步骤

// 鼠标放入到li中该盒子变宽，其他盒子变窄，鼠标移开大盒子，恢复原样
// 实现步骤
// 1. 给li添加背景
// 2. 绑定onmouseover事件，鼠标放入到li中，该盒子变宽，其他盒子变窄
// 3. 移开盒子，恢复原样

实现代码

<!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>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有