多物体滑动--->长度变换@慕课网原创_慕课网

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>长度变化动画</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        div {
            width:300px;
            height:100px;
            background:red;
            margin-bottom: 10px;
        }
    </style>
    <script>
        window.onload=function(){
            var ali = document.getElementsByTagName('div');
            for(var i=0;i<ali.length;i++){
                ali[i].onmouseover=function(){
                    moves(this,400);
                };
                ali[i].onmouseout=function(){
                    moves(this,200);
                }
            }
        };
        function moves(obj,tar){
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
               // var speed=(tar-obj.offsetWidth)/10;
               // speed=speed>0?Math.ceil(speed):Math.floor(speed);
                var speed=0;
                if(obj.offsetWidth>tar){
                    speed=-10;
                }
                else {
                    speed=10;
                }
                if(obj.offsetWidth==tar){
                    clearInterval(obj.timer);
                }else{
                    obj.style.width=obj.offsetWidth+speed+'px';
                }
            },30)
        }
    </script>
</head>

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