slideDoor（学习某编程网站的，仅作记录和学习）

 

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>slideDoor</title>
 7         <link type="text/css" rel="stylesheet" href="../common/reset.css" />
 8         <link type="text/css" rel="stylesheet" href="css/slideDoor.css" />
 9     </head>
10 
11     <body>
12         <div id='container'>
13             <img src="img/door1.png" alt="1080P神器" title="1080P神器" />
14             <img src="img/door2.png" alt="5.5寸四核" title="5.5寸四核" />
15             <img src="img/door3.png" alt="四核5寸" title="四核5寸" />
16             <img src="img/door4.png" alt="5.7寸机皇" title="5.7寸机皇" />
17         </div>
18     </body>
19     <script type="text/javascript" src="js/slideDoor.js"></script>
20 
21 </html>
#container {
	height: 477px;
	margin: 0 auto;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	overflow: hidden;
	position: relative;
}

#container img {
	position: absolute;
	display: block;
	left: 0;
	border-left: 1px solid #ccc;
}

　　

window.onload = function() {
	// 容器对象
	var box = document.getElementById('container');

	// 获得图片的集合
	var imgs = box.getElementsByTagName('img');

	var len = imgs.length;

	// 单张图片的宽度
	var imgWidth = imgs[0].offsetWidth;

	// 图片露出的宽度
	var exposeWidth = 160;

	// 设置容器的总宽度
	var boxWidth = imgWidth + (len - 1) * exposeWidth;

	// 每个door 滑动的距离
	var translate = imgWidth - exposeWidth;
	
	box.style.width = boxWidth + 'px';

	// 设置door 的初始位置
	function setImgsPos() {
		for (var i = 1; i < len; i++) {
			imgs[i].style.left = imgWidth + exposeWidth * (i - 1) + "px";
		}
	}
	
	setImgsPos();

	// 为door 绑定事件
	for (var i = 0; i < len; i++) {
		// 立即调用的函数表达式，为了获得不同的i值
		(function(i) {
			imgs[i].onmouseover = function() {
				// 先将每道门复位
				setImgsPos();
				// 打开门
				for (var j = 1; j <= i; j++) {
					imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + 'px';
				}
			}
		})(i);

	}

}

　　

posted @ 2016-01-31 17:10  duchushouxin  阅读(352)  评论(0)    收藏  举报