图片滑动有问题
滑第三个或者第四个的时候把第二个完全遮住了
chenmy0917
2016-12-06
5 回答
//绑定事件
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[i].style.left , 10) - translate + "px";
}
};
})(i);
}
中最后一个for循环中应该是parseInt(imgs[j].style.left,10)-translate + "px"
原因是因为鼠标移到第i个图片时，我们需要将i及其以前的图片相对于其本身移动translate的距离，而非相对于第i个图片移动。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滑动门</title>
<style type="text/css">
#container{
height:122px;
margin:0 auto;
border:1px solid grey;
overflow:hidden;
position:relative;
}
#container img{
background-color: #fff;
position:absolute;
display: block;
left:0;
border-left:1px solid grey;
}
</style>
<script type="text/javascript">
window.onload = function(){
//容器对象
var box = document.getElementById("container");
//获取图片的集合
var imgs = box.getElementsByTagName("img");
//定义单张图片的宽度
var imgWidth = imgs[0].offsetWidth;
//定义掩藏门的宽度
var exposeWidth = 61;
//定义总容器的宽度
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[i].style.left , 10) - translate + "px";
}
};
})(i);
}
}
</script>
</head>
<body>
<div id="container">
<img src="images/sh_1.gif" alt="sh_1" title="sh_1">
<img src="images/sh_2.gif" alt="sh_2" title="sh_2">
<img src="images/sh_3.gif" alt="sh_3" title="sh_3">
<img src="images/sh_4.gif" alt="sh_4" title="sh_4">
</div>
</body>
</html>举报
0/150
提交
取消
