圖片滑動有問題
滑第三個或者第四個的時候把第二個完全遮住了
chenmy0917
2016-12-06
5 回答
舉報
0/150
提交
取消
滑第三個或者第四個的時候把第二個完全遮住了
2016-12-06
舉報
2016-12-09
//綁定事件
???????for(var?i?=?0,len?=?imgs.length;?i?< len;?i++){
????????//為了獲得不同的I值，使用立即調(diào)用表達(dá)式
????????(?function(i){
????????????imgs[i].onmouseover?=?function(){
????????????????//先將所有的門復(fù)位
????????????????setImgsPos();
?
????????????????//打開門
????????????????for(var?j?=?1;?j?<=?i;?j++){
????????????????????imgs[j].style.left?=?parseInt(imgs[i].style.left?,?10)?-?translate?+?"px";
????????????????}
?
????????????};
????????})(i);
????}
中最后一個for循環(huán)中應(yīng)該是parseInt(imgs[j].style.left,10)-translate + "px"
原因是因?yàn)槭髽?biāo)移到第i個圖片時，我們需要將i及其以前的圖片相對于其本身移動translate的距離，而非相對于第i個圖片移動。
2022-01-05
for(let i = 0; i <imgs.length; i++){
????imgs[i].onmouseover = function(){
????????//先將所有的門復(fù)位
????????setPos();
????????//打開門
????????for(let j = 1; j <= i; j++){
????????????imgs[j].style.left = parseInt(imgs[j].style.left , 10) - translate + "px";
????????}
????};
}
//使用塊級作用域變量let,就不用使用立即執(zhí)行的函數(shù)表達(dá)式鎖住參數(shù)值i
2017-05-24
去年的，，，現(xiàn)在是大神了吧
2016-12-06
<!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; ???//定義總?cè)萜鞯膶挾? ???var?boxWidth?=?imgWidth?+?(imgs.length?-?1)?*?exposeWidth; ???box.style.width?=?boxWidth?+?"px"; ???//設(shè)置每道門的初始位置 ???//定義復(fù)位函數(shù) ???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值，使用立即調(diào)用表達(dá)式 (?function(i){ imgs[i].onmouseover?=?function(){ //先將所有的門復(fù)位 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>2016-12-06
不給代碼咋知道是哪錯了呢，我估計是你每次移動圖片時，沒有先將圖片位置復(fù)原，再移動。