js中var imgs=box.getElementsByTagName('img');这行代码总是报错,找不到原因
window.onload=function(){
//容器对象
var box=document.getElementById('contains');
//获取图片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);
}
};