js动画之面向对象一

继续改写在浏览器中移动的div，使用面向对象。

这是一步一步在进阶，想了解过程请看我前两篇博客。

https://www.cnblogs.com/duanhuarong/p/12195466.html

https://www.cnblogs.com/duanhuarong/p/12195575.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {margin: 0;padding: 0;}
        #div1 {width: 200px;height: 200px;position: absolute;left: 0;background: red;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <script>
        let Odiv = document.getElementById("div1");
        function Breakout(Odiv) {   //对象 构造函数  
            this.Odiv = Odiv;
            this.x = 0;
            this.y = 0;
        }
        Breakout.prototype = {    //原型方法  
            init() {  //初始化系统  
                this.divStar();    //初始化div  
            },
            divStar() {    
                this.Odiv.style.top = this.y + 'px';  
                this.Odiv.style.left = this.x + 'px';
                this.disX = 5;             
                this.disY = 5;                
                this.maxWidth = window.innerWidth - this.Odiv.offsetWidth - this.disX;         
                this.maxHeight = window.innerHeight - this.Odiv.offsetHeight - this.disY;    
                let that = this;
                window.onload = function () {
                    that.ballMove();             
                }
            },
            ballMove() {                 //div开始运动  
                function auto() {
                    if (this.x >= this.maxWidth) this.disX *= -1;
                    if (this.y >= this.maxHeight) this.disY *= -1;
                    if (this.x < 0) this.disX *= -1;
                    if (this.y < 0) this.disY *= -1;
                    this.x += this.disX;
                    this.y += this.disY;
                    this.Odiv.style.left = this.x + 'px';
                    this.Odiv.style.top = this.y + 'px';
                    window.requestAnimationFrame(auto.bind(this));
                }
                auto.call(this);
            },
        }
        var breakout = new Breakout(Odiv);
        breakout.init();
    </script>
</body>

</html>
posted @ 2020-01-15 14:05  飓风吟  阅读(269)  评论(0)    收藏  举报