index.html
<!DOCTYPE>
<html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="style/reset.css"/> <link rel="stylesheet" href="style/slinedoor.css"> <script type="text/javascript" src="script/sline.js"></script> </head> <body> <div id='container'> <img src="images/door1.png" alt="1" title="1-1"/> <img src="images/door2.png" alt="2" title="1-2"/> <img src="images/door3.png" alt="3" title="1-3"/> <img src="images/door4.png" alt="4" title="1-4"/> </div> </body>
</html>
slinedoor.css #container{ height: 447px;
margin: 0 auto;border-bottom: 1px solid #eee;border-left: 1px solid #eee;overflow: hidden;position: relative;
} #container img{ position: absolute; display: block; left: 0; border-left: 1px solid #eee;
}
sline.js window.onload = function() { //容器对象 var box = document.getElementById('container');
//获得图片NodeList对象集合var imgs = box.getElementsByTagName('img');//单张图片的宽度var imgWidth = imgs[0].offsetWidth;//设置掩藏门体露出的宽度var exposeWidth = 160;//设置容器总宽度var boxWidth = imgWidth + (imgs.length - 1) * exposeWidth;box.style.width = boxWidth + 'px';//设置每道门的初始位置function setImgsPos() { for (var i = 1, len = imgs.length; i < len; i++) { imgs[i].style.left = imgWidth + exposeWidth * (i - 1) + 'px'; }}setImgsPos();//计算每道门打开时应移动的距离var translate = imgWidth - exposeWidth;//为每道门绑定事件for (var i = 0, len = imgs.length; 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);} };