zoukankan html css js c++ java

JS运动基础

offsetLeft、offsetTop：包含了margin

offsetWidth、offsetHeight：盒模型尺寸，包括了padding、border的尺寸，如200px的div，border为1，padding为10，那么offsetWidth实际上是为222px

scrollTop

让一个div每隔30毫秒向左移动30px

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    #div1{width:200px; height:200px; background:red; position:absolute; left:0; top:50px;}
</style>
</head>

<body>
    <div id="div1"></div>
    
    <script>
        setInterval(function(){
            var oDiv = document.getElementById("div1");
            
            oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
        },30);
    </script>
</body>

注意offsetLeft为元素距离屏幕的左边距。

无缝滚动

利用移动，我们可以做一个无缝滚动的小控件

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    *{margin:0; padding:0;}
    .scrollList{width:400px; height:100px; margin:0px auto; margin-top:50px; overflow:hidden; position:relative; background:black;}
    .scrollList > ul{position:absolute; left:0; top:0;}
    .scrollList > ul > li{width:100px; height:100px; float:left; list-style:none;}
</style>
</head>

<body>
<div class="scrollList" id="div1">
    <ul>
        <li style="background:red;"></li>
        <li style="background:green;"></li>
        <li style="background:blue;"></li>
        <li style="background:green;"></li>
    </ul>
</div>
    
    <script>
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            var oUl = oDiv.getElementsByTagName("ul")[0];
            var aLi = oUl.getElementsByTagName("li");
            
            oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
            oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
            
            setInterval(function(){
                if(oUl.offsetLeft < -oUl.offsetWidth / 2){
                    oUl.style.left = '0';
                }
                oUl.style.left = oUl.offsetLeft - 2 + 'px';
            },30);
        };
    </script>
</body>
</html>

上面的移动是从右向左滚，如果我们想从左往右滚呢？

<script>
    window.onload = function(){
        var oDiv = document.getElementById("div1");
        var oUl = oDiv.getElementsByTagName("ul")[0];
        var aLi = oUl.getElementsByTagName("li");
        
        oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
        oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
        
        setInterval(function(){
            if(oUl.offsetLeft < -oUl.offsetWidth / 2){
                oUl.style.left = '0';
            }
            if(oUl.offsetLeft > 0){
                oUl.style.left = -oUl.offsetWidth / 2 + 'px';
            }
            oUl.style.left = oUl.offsetLeft + 2 + 'px';
        },30);
    };
</script>

当鼠标进入的时候滚动会停止，移出的时候继续移动

<script>
    window.onload = function(){
        var oDiv = document.getElementById("div1");
        var oUl = oDiv.getElementsByTagName("ul")[0];
        var aLi = oUl.getElementsByTagName("li");
        var timer = null;
        
        oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
        oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
        
        function move(){
            if(oUl.offsetLeft < -oUl.offsetWidth / 2){
                oUl.style.left = '0';
            }
            if(oUl.offsetLeft > 0){
                oUl.style.left = -oUl.offsetWidth / 2 + 'px';
            }
            oUl.style.left = oUl.offsetLeft + 2 + 'px';
        }
        
        timer = setInterval(move,30);
        
        oDiv.onmouseover = function(){
            clearInterval(timer);
        };
        
        oDiv.onmouseout = function(){
            timer = setInterval(move,30);
        };
    };
</script>

最后我们再加上按钮控制整个滚动的方向

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    *{margin:0; padding:0;}
    .scrollList{width:400px; height:100px; margin:0px auto; margin-top:50px; overflow:hidden; position:relative; background:black;}
    .scrollList > ul{position:absolute; left:0; top:0;}
    .scrollList > ul > li{width:100px; height:100px; float:left; list-style:none;}
</style>
</head>

<body>
<input type="button" value="Left" id="btnL" />
<input type="button" value="Right" id="btnR" />
<div class="scrollList" id="div1">
    <ul>
        <li style="background:red;"></li>
        <li style="background:green;"></li>
        <li style="background:blue;"></li>
        <li style="background:green;"></li>
    </ul>
</div>
    
<script>
    window.onload = function(){
        var oDiv = document.getElementById("div1");
        var oUl = oDiv.getElementsByTagName("ul")[0];
        var aLi = oUl.getElementsByTagName("li");
        var timer = null;
        
        var btnL = document.getElementById("btnL");
        var btnR = document.getElementById("btnR");
        
        var speed = 2;
        
        oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
        oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
        
        function move(){
            if(oUl.offsetLeft < -oUl.offsetWidth / 2){
                oUl.style.left = '0';
            }
            if(oUl.offsetLeft > 0){
                oUl.style.left = -oUl.offsetWidth / 2 + 'px';
            }
            oUl.style.left = oUl.offsetLeft + speed + 'px';
        }
        
        timer = setInterval(move,30);
        
        oDiv.onmouseover = function(){
            clearInterval(timer);
        };
        
        oDiv.onmouseout = function(){
            timer = setInterval(move,30);
        };
        
        btnL.onclick = function(){
            if(speed > 0){
                speed = -speed;
            }
        };
        btnR.onclick = function(){
            if(speed < 0){
                speed = -speed;
            }
        };
    };
</script>
</body>
</html>

=======================更新与2015年12月25日==================

回到让div运动的例子，现在我们还要做几件事情：

1.让div能够在指定的地方停下来

2.鼠标点击后保证只有一个定时器在执行（在运动开始时，关闭已有定时器）

3.把运动和停止隔开

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    #div1{width:200px; height:200px; background:red; position:absolute; top:50px; left:0;}
</style>
<script>
    var timer = null;
    function startMove(){
        var oDiv = document.getElementById("div1");
        
        clearInterval(timer);
        timer = setInterval(function(){
            var speed = 10;
            
            if(oDiv.offsetLeft >= 300){
                clearInterval(timer);
            }else{
                oDiv.style.left = oDiv.offsetLeft + speed +'px';
            }
        },30);
    }
</script>
</head>

<body>
    <input id="btn1" type="button" value="animate" onclick="startMove()" />
    <div id="div1"></div>
</body>
</html>

分享到

我们可以把这个例子的思维运用到我们经常在网页上看到的“分享到”按钮

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    #div1{width:150px; height:200px; background:green; position:absolute; left:-150px;}
    #div1 span{position:absolute;width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;}
</style>
<script>
    window.onload = function(){
        var oDiv = document.getElementById("div1");
        
        oDiv.onmouseover = function(){
            startMove(0,10);
        };
        oDiv.onmouseout = function(){
            startMove(-150,-10);
        };
    };
    
    var timer = null;
    
    function startMove(target,speed){
        var oDiv = document.getElementById("div1");
        
        clearInterval(timer);
        timer = setInterval(function(){
            if(oDiv.offsetLeft == target){
                clearInterval(timer);
            }else{
                oDiv.style.left = oDiv.offsetLeft + speed +'px';
            }
        },30);
    }
</script>
</head>

<body>
    <div id="div1">
        <span>分享到</span>
    </div>
</body>
</html>

我们可以把speed参数去掉，因为speed参数是不必要的，就像我们打车去一个目的地，我们不会告诉司机要用多快的速度开车。我们修改一下startMove()就好。

    function startMove(target){
        var oDiv = document.getElementById("div1");
        
        clearInterval(timer);
        timer = setInterval(function(){
            var speed = 0;
            if(oDiv.offsetLeft > target){
                speed = -10;
            }else{
                speed = 10;
            }
            
            if(oDiv.offsetLeft == target){
                clearInterval(timer);
            }else{
                oDiv.style.left = oDiv.offsetLeft + speed +'px';
            }
        },30);
    }

淡入淡出图片

现在我们可以把这个思维用在淡入淡出的图片上面，鼠标移入，透明度变成100%，鼠标移出，透明度变为原来的透明度。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    #div1{width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3;}
</style>
<script>
    window.onload = function(){
        var oDiv = document.getElementById("div1");
        
        oDiv.onmouseover = function(){
            startMove(100);
        };
        oDiv.onmouseout = function(){
            startMove(30);
        };
    };
    
    var timer = null;
    var alpha = 30;
    function startMove(target){
        var oDiv = document.getElementById("div1");
        
        clearInterval(timer);
        timer = setInterval(function(){
            var speed = 0;
            
            if(alpha < target){
                speed = 10;
            }else{
                speed = -10;
            }
            
            if(alpha == target){
                clearInterval(timer);
            }else{
                alpha += speed;
                
                oDiv.style.filter = 'alpha(opacity:'+ alpha +')';
                oDiv.style.opacity = alpha/100;
            }
        },30);
    }
</script>
</head>

<body>
    <div id="div1"></div>
</body>
</html>

===============更新与2015年12月27日====================

缓冲运动

div越靠近目的地速度会越慢，直到最后归为0。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    #div1{width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}
</style>
<script>
    window.onload = function(){
        
    };
    
    function startMove(){
        var oDiv = document.getElementById("div1");
        setInterval(function(){
            var speed = (300 - oDiv.offsetLeft)/10;
            
            oDiv.style.left = oDiv.offsetLeft + speed +'px';
        },30);
    }
</script>
</head>

<body>
    <input type="button" onClick="startMove()" value="animate" />
    <div id="div1"></div>
</body>
</html>

但是还有一个小问题，因为速度可能会是一个小数，而js会把小数自动向下取整为整数，这样就不能到达目的地了。所以我们加上一个向上取整和向下取整的判断。

function startMove(){
    var oDiv = document.getElementById("div1");
    setInterval(function(){
        var speed = (300 - oDiv.offsetLeft)/10;
        speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
        
        oDiv.style.left = oDiv.offsetLeft + speed +'px';
    },30);
}

把这个例子完善一下，最后无论是往左还是往右，都可以实现精确的缓冲运动了。

总结一下

1.距离越远速度越大，速度由距离决定

2.速度=（目标值-当前值）/缩放系数

右侧悬浮框

在有滚动条的窗口中，怎么滚动，div都定位在相同的位置，比如“回到最顶端”按钮就是这么做的。

原理是用可视区的高度减去 div本身的高度再加上滚动窗口滚动的距离，最后得到的结果就是div在整个窗口（包括非可视区）的顶端距离值。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    #div1{width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}
</style>
<script>
    window.onscroll = function(){
        var oDiv = document.getElementById("div1");
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        
        oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + 'px';
    };
</script>
</head>

<body style="height:2000px;">
    <div id="div1"></div>
</body>
</html>

把这个思路套入到我们的运动框架之中，就变成了，

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    #div1{width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}
</style>
<script>
    window.onscroll = function(){
        var oDiv = document.getElementById("div1");
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        
        //oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + 'px';
        
        startMove(document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop);
    };
    
    var timer = null
    function startMove(target){
        var oDiv = document.getElementById("div1");
        
        clearInterval(timer);
        timer = setInterval(function(){
            var speed = (target - oDiv.offsetTop)/6;
            speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
            
            if(oDiv.offsetTop == target){
                clearInterval(timer);
            }else{
                oDiv.style.top = oDiv.offsetTop + speed + 'px';
            }
        },30);
    }
</script>
</head>

<body style="height:2000px;">
    <div id="div1"></div>
</body>
</html>

对联式悬浮框

把这个例子稍作修改，把div放到屏幕的中间，就像很多网站会用到的那种对联式的广告一样，我们在top的计算方式上稍作修改就能把div投放到屏幕中间高度去，但是这样除以2会出现一个小问题，那就是0.5的问题，计算机对这样的小数又无法确认了，于是就会出现抖动现象，这时候我们使用parseInt()就好了。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    #div1{width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}
</style>
<script>
    window.onscroll = function(){
        var oDiv = document.getElementById("div1");
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        
        //oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop + 'px';
        
        startMove(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop));
        
    };
    
    var timer = null
    function startMove(target){
        var oDiv = document.getElementById("div1");
        
        clearInterval(timer);
        timer = setInterval(function(){
            var speed = (target - oDiv.offsetTop)/6;
            speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
            
            if(oDiv.offsetTop == target){
                clearInterval(timer);
            }else{
                oDiv.style.top = oDiv.offsetTop + speed + 'px';
            }
        },30);
    }
</script>
</head>

<body style="height:2000px;">
    <div id="div1"></div>
</body>
</html>

多物体同时运动

我们放入三个div，让每个div在鼠标移入移出的时候发生宽度上的变化

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    div{width:100px; height:50px; background:red; margin:10px;}
</style>
<script>
    window.onload = function(){
        var aDiv = document.getElementsByTagName('div');
        
        for(var i=0;i<aDiv.length;i++){
            aDiv[i].onmouseover = function(){
                startMove(this,400);
            };
            aDiv[i].onmouseout = function(){
                startMove(this,100);
            };
        }
    };
    var timer = null;
    function startMove(obj,target){
        clearInterval(timer);
        timer = setInterval(function(){
            var speed = (target - obj.offsetWidth)/6;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            
            if(obj.offsetWidth == target){
                clearInterval(timer);
            }else{
                obj.style.width = obj.offsetWidth + speed + 'px';
            }
        },30);
    }
</script>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

但是这时候会出现一个问题，当我们的鼠标移动的很快，在一个div还没有完成我们期望的动作之前移出鼠标，定时器被清楚，而div的宽度就会固定住。这个时候我们需要开多个定时器来让他们同时工作。

我们在遍历div数组的时候传入this指针，每个this就是一个obj，这样我们可以告诉我们的方法，我们要让哪个obj运动，运动到哪个target，利用object的属性设置，我们把定时器作为对象的一个属性传入到我们的方法当中去，代码如下

<script>
    window.onload = function(){
        var aDiv = document.getElementsByTagName('div');
        
        for(var i=0;i<aDiv.length;i++){
            aDiv[i].timer = null;
            
            aDiv[i].onmouseover = function(){
                startMove(this,400);
            };
            aDiv[i].onmouseout = function(){
                startMove(this,100);
            };
        }
    };
    var timer = null;
    function startMove(obj,target){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var speed = (target - obj.offsetWidth)/6;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            
            if(obj.offsetWidth == target){
                clearInterval(obj.timer);
            }else{
                obj.style.width = obj.offsetWidth + speed + 'px';
            }
        },30);
    }
</script>

这样我们就可以正常跑这个程序了。

现在我们放置四个div，让每个div在鼠标移入移出的时候发生透明度上的变化。同样我们会用到obj.timer的思路

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    div{width:200px; height:200px; background:red; margin:20px; float:left; filter:alpha(opacity:30); opacity:0.3;}
</style>
<script>
    window.onload = function(){
        var aDiv = document.getElementsByTagName('div');
        
        for(var i=0;i<aDiv.length;i++){
            aDiv[i].timer = null;
            
            aDiv[i].onmouseover = function(){
                startMove(this,100);
            };
            aDiv[i].onmouseout = function(){
                startMove(this,30);
            };
        }
    };
    var alpha = 30;
    function startMove(obj,target){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var speed = (target - alpha)/6;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            
            if(alpha == target){
                clearInterval(obj.timer);
            }else{
                alpha += speed;
                
                obj.style.filter = 'alpha(opacity:' + alpha +')';
                obj.style.opacity = alpha/100;
            }
        },30);
    }
</script>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

但是运行后发现还是会有冲突，因为alpha只有一个。

在多物体运动应用中，不能有共用的东西。

既然这样，那我们就把alpha也设置成obj的属性：obj.alpha ，这样程序就又能正常跑起来了。

<script>
    window.onload = function(){
        var aDiv = document.getElementsByTagName('div');
        
        for(var i=0;i<aDiv.length;i++){
            aDiv[i].timer = null;
            aDiv[i].alpha = 30;
            
            aDiv[i].onmouseover = function(){
                startMove(this,100);
            };
            aDiv[i].onmouseout = function(){
                startMove(this,30);
            };
        }
    };
    //var alpha = 30;
    function startMove(obj,target){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var speed = (target - obj.alpha)/6;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            
            if(obj.alpha == target){
                clearInterval(obj.timer);
            }else{
                obj.alpha += speed;
                
                obj.style.filter = 'alpha(opacity:' + obj.alpha +')';
                obj.style.opacity = obj.alpha/100;
            }
        },30);
    }
</script>

任意值运动

现在我们放入2个div，让其中一个鼠标移入变高，另一个变宽。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    div{width:200px; height:200px; background:yellow; margin:20px; float:left;}
</style>
<script>
    window.onload = function(){
        var oDiv1 = document.getElementById('div1');
        
        oDiv1.onmouseover = function(){
            startMove(this,400);
        };
        oDiv1.onmouseout = function(){
            startMove(this,200);
        };
        
        var oDiv2 = document.getElementById('div2');
        
        oDiv2.onmouseover = function(){
            startMove2(this,400);
        };
        oDiv2.onmouseout = function(){
            startMove2(this,200);
        };
    };
    //var alpha = 30;
    function startMove(obj,target){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var speed = (target - obj.offsetHeight)/6;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            
            if(obj.offsetHeight == target){
                clearInterval(obj.timer);
            }else{
                obj.style.height = obj.offsetHeight + speed + 'px';
            }
        },30);
    }
    
    function startMove2(obj,target){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var speed = (target - obj.offsetWidth)/6;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            
            if(obj.offsetWidth == target){
                clearInterval(obj.timer);
            }else{
                obj.style.width = obj.offsetWidth + speed + 'px';
            }
        },30);
    }
</script>
</head>

<body>
    <div id="div1">变高</div>
    <div id="div2">变宽</div>
</body>
</html>

我们写了2个startMove，这是很不现实的事情，因为我们不可能针对每个运动都写一个新的方法，唯一的方法只能是去优化，抽象。

在此之前，我们先要解决一个问题，那就是offsetWidth和offsetHeight，这两个属性是有兼容性的问题的，所以我们要换掉。

我们使用IE属性getCurrentStyle和Chrome方法getComputedStyle()合成的封装方法getStyle()

function getStyle(obj,name){
    if(obj.currentStyle){
        return obj.currentStyle[name];
    }else{
        return getComputedStyle(obj,false)[name];
    }
}

然后我们针对height写一个初步的版本

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    div{width:200px; height:200px; background:yellow; margin:20px; float:left; border:1px solid blue;}
</style>
<script>
    window.onload = function(){
        var oDiv1 = document.getElementById('div1');
        var oDiv2 = document.getElementById('div2');
        
        oDiv1.onmouseover = function(){
            startMove(this,400);
        };
        oDiv1.onmouseout = function(){
            startMove(this,200);
        };
        
        /*oDiv2.onmouseover = function(){
            startMove(this,400);
        };
        oDiv2.onmouseout = function(){
            startMove(this,200);
        };*/
    };
    
    function getStyle(obj,name){
        if(obj.currentStyle){
            return obj.currentStyle[name];
        }else{
            return getComputedStyle(obj,false)[name];
        }
    }
    
    function startMove(obj,target){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var cur = parseInt(getStyle(obj,'height'));
            
            var speed = (target - cur)/6;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            
            if(cur == target){
                clearInterval(obj.timer);
            }else{
                obj.style.height = cur + speed + 'px';
            }
        },30);
    }
</script>
</head>

<body>
    <div id="div1">变高</div>
    <div id="div2">变宽</div>
</body>
</html>

然后我们再改造一下startMove的参数结构

function startMove(obj,attr,target){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var cur = parseInt(getStyle(obj,attr));
        
        var speed = (target - cur)/6;
        speed = speed>0?Math.ceil(speed):Math.floor(speed);
        
        if(cur == target){
            clearInterval(obj.timer);
        }else{
            obj.style[attr] = cur + speed + 'px';
        }
    },30);
}

现在我们使用参数attr来代替属性height，这样attr可以是任意属性比如说width，

这样我们在调用的时候也要加入attr，

startMove(this,'height',400);

记得要加引号

最后我们把之前div2的注释去掉，完整版如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    div{width:200px; height:200px; background:yellow; margin:20px; float:left; border:1px solid blue;}
</style>
<script>
    window.onload = function(){
        var oDiv1 = document.getElementById('div1');
        var oDiv2 = document.getElementById('div2');
        
        oDiv1.onmouseover = function(){
            startMove(this,'height',400);
        };
        oDiv1.onmouseout = function(){
            startMove(this,'height',200);
        };
        
        oDiv2.onmouseover = function(){
            startMove(this,'width',400);
        };
        oDiv2.onmouseout = function(){
            startMove(this,'width',200);
        };
    };
    
    function getStyle(obj,name){
        if(obj.currentStyle){
            return obj.currentStyle[name];
        }else{
            return getComputedStyle(obj,false)[name];
        }
    }
    
    function startMove(obj,attr,target){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var cur = parseInt(getStyle(obj,attr));
            
            var speed = (target - cur)/6;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            
            if(cur == target){
                clearInterval(obj.timer);
            }else{
                obj.style[attr] = cur + speed + 'px';
            }
        },30);
    }
</script>
</head>

<body>
    <div id="div1">变高</div>
    <div id="div2">变宽</div>
</body>
</html>

现在这个框架就很完善了，可以改变大部分的属性，除了。。。。。。最常用的透明度

第一是因为我们在获取的时候使用了parsInt取整，而透明度的值本身只是个小数，第二是因为我们在设置的时候使用了px，而透明度没有px单位。

针对这两种情况，总的思路，我们还是用if...else...判断去写不同情况下的分支，细节方面，parseInt我们要改成parseFloat，而透明度的设置也有不同，IE下是style.filter=alpha(opacity:value)，chrome下是style.opacity=value。于是最终的结果如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    div{width:200px; height:200px; background:yellow; margin:20px; float:left; border:1px solid blue; filter:alpha(opacity:30); opacity:0.3}
</style>
<script>
    window.onload = function(){
        var oDiv1 = document.getElementById('div1');
        
        oDiv1.onmouseover = function(){
            startMove(this,'opacity',100);
        };
        oDiv1.onmouseout = function(){
            startMove(this,'opacity',30);
        };
    };
    
    function getStyle(obj,name){
        if(obj.currentStyle){
            return obj.currentStyle[name];
        }else{
            return getComputedStyle(obj,false)[name];
        }
    }
    
    function startMove(obj,attr,target){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            if(attr == 'opacity'){
                var cur = Math.round(parseFloat(getStyle(obj,attr))*100);
            }else{
                var cur = parseInt(getStyle(obj,attr));
            }
            
            var speed = (target - cur)/6;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            
            if(cur == target){
                clearInterval(obj.timer);
            }else{
                if(attr == 'opacity'){
                    obj.style.filter = 'alpha(opacity:'+ (cur + speed) +')';
                    obj.style.opacity = (cur + speed)/100;
                }else{
                    obj.style[attr] = cur + speed + 'px';
                }
                
            }
        },30);
    }
</script>
</head>

<body>
    <div id="div1"></div>
</body>
</html>

注意在代码中我们还特意使用了round()方法，这样做是因为计算机在处理小数的时候会有误差，我们要做一个四舍五入。

现在我们的运动框架就算是告一段落了。

仿Flash图片轮播

http://www.miaov.com/miaov_demo/flash_play/miaov_demo.html

链式运动框架（连续地进行几段运动）

查看全文

相关阅读:
BSGS模板（互质与不互质）洛谷P4195、P3846
整除分块（数论分块）
洛谷P3327 [SDOI2015]约数个数和——莫比乌斯反演
 模块二
 模块
 二分法匿名函数
 3.26作业
 函数的递归调用
 yield表达式三元表达式
 3.25作业

原文地址：https://www.cnblogs.com/zcynine/p/5065470.html