每日一个js实例5--通过面向对象实现运动

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

#div1{width: 200px;height: 200px;background: pink;position: absolute;}

<script>

//requestAnimFrame兼容性处理

      window.requestAnimFrame = (function(){
        return  window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||  
          function( callback ){
          window.setTimeout(callback, 1000 / 60);
        };
})();
       // div向右移动运动
        function Move(id){
            this.oDiv1=document.getElementById(id);
            this.speed=1;
            this.moveLeft=function(){
                if(this.oDiv1.offsetLeft ==500){
                    return false;
                }else{
                    this.oDiv1.style.left=this.oDiv1.offsetLeft+this.speed+"px";
                }
            }
        }
        var oDiv1=new Move("div1");
          function animloop() {
               oDiv1.moveLeft();
               requestAnimFrame(animloop);
         }
        animloop();

    //div向右增大运动
    function Move(id){
            this.oDiv1=document.getElementById(id);
            this.speed=1;
            this.width=200;
            this.moveLeft=function(){
                if(this.oDiv1.offsetWidth >= 500){
                    this.speed=1;
                    this.speed+=1;
                    this.oDiv1.style.width=this.width+this.speed+"px";
                }else{
                    this.speed+=1;
                    this.oDiv1.style.width=this.width+this.speed+"px";
                }
            }
        }
        var oDiv1=new Move("div1");
          function animloop() {
               oDiv1.moveLeft();
               requestAnimFrame(animloop);
         }
        animloop();
    </script>