慕课网多物体运动源代码-CSDN博客

慕课网多物体运动源代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多物体运动</title>
    <style>
        ul,li{
            list-style: none;
        }
        ul li{
            width:200px;
            height:100px;
            background:yellow;
            margin-bottom: 20px;
        }
    </style>
    <script>
        window.οnlοad=function(){
            var ali=document.getElementsByTagName('li');
            for(var i=0;i<ali.length;i++){
                ali[i].timer=null
                ali[i].οnmοuseοver=function(){
                    startMove(this,400);
                }
                ali[i].οnmοuseοut=function(){
                    startMove(this,200);
                }
            }
        }
      //  var timer=null;
        function startMove(obj,iTarget){
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var speed=(iTarget-obj.offsetWidth)/8;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                if(obj.offsetWidth==iTarget){
                    clearInterval(obj.timer);
                }else{
                    obj.style.width=obj.offsetWidth+speed+'px';
                }
            },30)
        }
    </script>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>
慕课网视频网址http://www.imooc.com/video/3048