图片滑动有问题

个回答

慕用1475049

2016-12-09 10:12:37

已采纳

//绑定事件
       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个图片移动。

1
DVBBS

2022-01-05 09:59:29

for(let i = 0; i <imgs.length; i++){
    imgs[i].onmouseover = function(){
        //先将所有的门复位
        setPos();
        //打开门
        for(let j = 1; j <= i; j++){
            imgs[j].style.left = parseInt(imgs[j].style.left , 10) - translate + "px";
        }
    };
}
//使用块级作用域变量let,就不用使用立即执行的函数表达式锁住参数值i

0
小白菜v

2017-05-24 21:30:45

去年的，，，现在是大神了吧

0

chenmy0917: 2016-12-06 20:38:16

<!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>

慕用1475049

2016-12-06 20:30:43

不给代码咋知道是哪错了呢，我估计是你每次移动图片时，没有先将图片位置复原，再移动。

0