小弟刚入门编程,在网上看到一个javascript实现图片滑动门效果,自己尝试着用面向对象的方式重做了一遍,可是效果却有问题,希望大神帮忙看看,哪里出问题了。
html代码
<!DOCTYPE HTML>
<html>
<head>
<title>京东首页</title>
<meta charset="utf-8" />
<style>
#box{
height:292px;
margin:0 auto;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
overflow:hidden;
position:relative;
}
#box img{
position:absolute;
display:block;
left:0;
border-left:1px solid #ccc;
}
</style>
<script src="imgs.js"></script>
</head>
<body>
<p id="box">
<img src="image1.jpg">
<img src="image1.jpg">
<img src="image1.jpg">
<img src="image1.jpg">
<img src="image1.jpg">
</p>
</body>
</html>
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<len;i++){
imgs[i].style.left=this.WSIZE+this.HIDEIMG*(i-1)+"px";
console.log(imgs[i].style.left);
}
},
}
window.onload=function (){
door.init();
}
当我移动第三张图片的时候它会把第二张图片给遮住了 实在是想不明白了!
走同样的路,发现不同的人生