图片滑动有问题
chenmy0917
2016-12-06 19:24
滑第三个或者第四个的时候把第二个完全遮住了
5回答
-
- 慕用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个图片移动。
-
- 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
-
- 小白菜v
- 2017-05-24 21:30:45
去年的，，，现在是大神了吧
-
- 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
不给代码咋知道是哪错了呢，我估计是你每次移动图片时，没有先将图片位置复原，再移动。
DOM探索之基础详解篇
98372 学习 · 238 问题
相似问题