JS实现滑动门效果的方法详解

window.onload=function(){  var box=document.getElementById("box");  var img=box.getElementsByTagName("img");  //单张图片宽度  var imgWidth=img[0].offsetWidth;  //露出的宽度  var exposeWidth=160;  //设置容器总宽度  var boxWidth=imgWidth+exposeWidth*(img.length-1)  box.style.width=boxWidth+"px";  //设置图片初始位置  function setImgspos(){    for(var i=1,len=img.length;i<len;i++){ //len在for循环的初始化语句里先定义好，这样就不需要每次都计算img的个数了，比for(var i=1;i<img.length;i++)性能高      img[i].style.left=imgWidth+exposeWidth*(i-1)+"px";    }  }  setImgspos();  //计算每道门打开时应移动的距离  var translate=imgWidth-exposeWidth;  for(var i=0,len=img.length;i<len;i++){    (function(i){ //这里为什么需要匿名函数？(简单来说是函数变量作用域的问题)img[i].onmouseover=function(){}这个函数内部使用了变量i，但是i没有定义，于是向外查找，找到for循环里定义的i，点击事件是for循环执行完毕后才开始执行的，即此时i=4，所以会报错img[i]没有定义，这里加一层匿名函数相当于闭包处理，i以形参的方式传递给内层函数      img[i].onmouseover=function(){        setImgspos(); //每次移上去先重置位置        for(var j=1;j<=i;j++){ //第二个循环体作用：可能会移多道门(比如放到第三道门上，二和三都要动，不是只动三，另外第一道门永远不动)          img[j].style.left=parseInt(img[j].style.left)-translate+"px";        }      };    })(i); //这个i是实参  }};

window.onload=function(){  var box=document.getElementById("box");  var img=box.getElementsByTagName("img");  //单张图片宽度  var imgWidth=img[0].offsetWidth;  //露出的宽度  var exposeWidth=160;  //设置容器总宽度  var boxWidth=imgWidth+exposeWidth*(img.length-1)  box.style.width=boxWidth+"px";  //设置图片初始位置  for(var i=1,len=img.length;i<len;i++){    img[i].pos=img[i].style.left=imgWidth+exposeWidth*(i-1)+"px";  }  function openDoor(el,translate){    var begin=parseInt(el.pos);    var end=begin-translate;    var iSpeed=10;    setTimeout(function(){      el.style.left=parseInt(el.style.left)-iSpeed+"px"; //为什么不用begin？每次的初始位置会变      iSpeed*=1.5;  //没有这句话就是匀速运动      if(parseInt(el.style.left)<=end){        el.style.left=end+"px";      }else{        setTimeout(arguments.callee,25); //定时器有名字可以直接调用，没名字，就用原生js方法arguments.callee      }    },25);  };  function closeDoor(el,translate){    var begin=parseInt(el.pos)-translate; //关门默认情况是张开的    var end=begin+translate; //这里可以直接写var end=parseInt(el.pos);    var iSpeed=100;    setTimeout(function(){      el.style.left=parseInt(el.style.left)+iSpeed+"px"; //为什么不用begin？每次的初始位置会变      iSpeed=Math.ceil(iSpeed*0.7); //没有这句话就是匀速运动      if(parseInt(el.style.left)>=end){        el.style.left=end+"px";      }else{        setTimeout(arguments.callee,25); //定时器有名字可以直接调用，没名字，就用原生js方法arguments.callee      }    },25);  };  var translate=imgWidth-exposeWidth;  for(var i=0,len=img.length;i<len;i++){    (function(i){      img[i].onmouseover=function(){        //开门 自己和自己左边的全部循环到        for(var j=1;j<=i;j++){          openDoor(img[j],translate);        }        //关门 自己右边的全部循环到        for(var j=i+1;j<img.length;j++){          closeDoor(img[j],translate);        }      };    })(i);  }};