为了账号安全,请及时绑定邮箱和手机立即绑定

为什么没有图片铺开的效果

视频JS+DOM中02:38的那时候的效果不能实现,总是四张图片堆叠在一起。为什么 啊?我的代码和老师的是一样的。

正在回答

3 回答

开始的前两行,我就没有效果。第一行有效果,从第二行开始就没有了

0 回复 有任何疑惑可以回复我~

window.onload=function(){

//获得容器对象

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

//获得图片NodeList对象集合

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

//单张图片的宽度

var imgWidth=imgs[0].offsetWidth;

//设置掩藏门体露出的宽度

var exposeWidth=160;

//设置容器的总宽度

var boxWidth=imhWidth+(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){

img[i].onmouseover=function(){

//先将每道门复位

setImgsPos();

//打开门

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

{

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

}

 

};

 

})(i);

}

};//加载完窗口所有内容之后执行function;

这是我的JS文件

0 回复 有任何疑惑可以回复我~
#1

拉格朗日之都

11行imgWidth拼写错误
2016-03-13 回复 有任何疑惑可以回复我~
#2

拉格朗日之都

11行应该是*exposeWidth,而不是+
2016-03-13 回复 有任何疑惑可以回复我~
#3

拉格朗日之都

为每道门绑定事件时,应该是imgs[i],而不是img[i]
2016-03-13 回复 有任何疑惑可以回复我~

只发图片别人不清楚的

0 回复 有任何疑惑可以回复我~
#1

拉格朗日之都

11行imgWidth拼写错误
2016-03-13 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么没有图片铺开的效果

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信