小弟刚入门编程，在网上看到一个javascript实现图片滑动门效果，自己尝试着用面向对象的方式重做了一遍，可是效果却有问题，希望大神帮忙看看，哪里出问题了。
html代码
0
368
京东首页
javascript 代码
var door={
WSIZE:0,//单张图片的宽度
DSIZE:0,//整个p的宽度
HIDEIMG:100,//图片掩藏的宽度
translate:0,
init:function(){
//找到id为box下的所有img,保存在变量img中
var imgs=box.getElementsByTagName("img");
console.log(imgs);
//获取单张图片的宽度保存在WSIZE中
//this.WSIZE=getComputedStyle(img[0]).width;
this.WSIZE=imgs[0].offsetWidth;
console.log(this.WSIZE);
//设置box的宽度为HIDEIMG*3+单张图片的宽度WSIZE
box.style.width=this.WSIZE+this.HIDEIMG*(imgs.length-1)+"px";
console.log(box.style.width);
//调用初始化位置
this.setImgsPos();
//计算图片打开时移动的距离
this.translate=this.WSIZE-this.HIDEIMG;
console.log(this.translate);
//给id下所有的img元素绑定鼠标移入事件
box.addEventListener("mouseover",this.slide.bind(this));
},
slide:function(e){
var target=e.target;
if(target.nodeName=="IMG"){
this.setImgsPos();
target.style.left=parseInt(target.style.left)-this.translate+"px";
}
},
setImgsPos:function(){//图片初始化位置
var imgs=box.getElementsByTagName("img");
for(var i=1,len=imgs.length;i当我移动第三张图片的时候它会把第二张图片给遮住了 实在是想不明白了！
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
走同样的路，发现不同的人生