[Js]滑动门效果

描述：鼠标移动到一副图片上，会显示该副图片的全貌，而其他图片会显示概貌

一、没有动画效果的运动

思路：

1.定好每张图片的初始位置（第一张完全显示，234只露出一部分）

2.计算每道门的移动距离（即未显露的部分）

3.绑定鼠标滑过事件

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是实参
    }
};

二、展开加速、收拢减速的运动

注意：设置每道门初始位置时，不需要在写一个function了，因为要分别写打开和关闭动画，会造成一个卡顿，瞬间闪烁。

思路：

1.需要鼠标滑过这道门的初始位置

2.需要鼠标滑过这道门的结尾位置

3.需要一个速度和定时器来完成缓缓移动的过程

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);  
    }
};