window.onload=function(){

//容器對象

var box=document.getElementById('contains');

//獲取圖片NodeList對象集合

var imgs=box.getElementsByTagName('img');

//單張圖片的寬度

var imgWidth=imgs[0].offsetWidth;

//設(shè)置掩藏門體露出的寬度

var exposeWidth=160;

//設(shè)置容器總寬度

var boxWidth=imgWidth+(imgs.length-1)*exposeWidth;

box.style.width=boxWidth+'px';

//設(shè)置每道門的初始位置

function setImgsPos(){

for(var i=1,len=imgs.length;i<len;i++){

imgs[i].style.left=imgWidth+exposeWidth*(i-1)+'px';

}

}

setImgsPos();

//計算每道門打開時應(yīng)移動的距離

var translate=imgWidth-exposeWidth;

//為每道門綁定事件

for(var i=0,len=imgs.length;i<len;i++){

//使用立即調(diào)用的函數(shù)表達(dá)式，為了獲取不同的i值

(function(i){

imgs[i].onmouseover=function(){

//先將每道門復(fù)位

setImgsPos();

//打開門

for(var j=1;j<=i;j++){

imgs[j].style.left=parseInt(imgs[j].style.left,10)-translate+'px';

}

};

})(i);

}

};