<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>传送门显示图片</title>
<link rel="stylesheet" href="css/door.css" type="text/css"/>
<link rel="stylesheet" href="css/reset.css" type="text/css"/>
<script src="script/door.js"></script>
</head>
<body>
<div id="container">
<img src="images/door1.png" />
<img src="images/door2.png"/>
<img src="images/door3.png"/>
<img src="images/door4.png"/>
</div>
</body>
</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');
//获得图片NodeList对象集合
var imgs = box.getElementsByClassName('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,length=imgs.width;i<len;i++)
{
imgs[i].style.left=imgWidth+(i-1)*exposeWidth;
}
}
setImgsPos();
//计算每道门打开时应移动的距离
var translate=imgWidth-exposeWidth;
//为每道门绑定事件
for(var i=0,len=imgs.length;i<len;i++)
{
//使用立即调用的函数表答式，为获得不同的值
(function (i) {
imgs[i].onmouseover=function () {
//先将每道门复位
setImgsPos();
//打开门
for(var j=1;j<=i;j++)
{
imgs[i].style.left=parseInt(imgs[i].style.left,10)-translate+'ps';
}
}
})(i);
}
};
