每日一个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>