js动画之面向对象二
作者：互联网
面向对象，就是将一系列具有相同属性的元素提取出来，需要用的时候就new一个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {margin: 0;padding: 0;}
div{width: 200px;height: 200px;position: absolute;left: 0;background: red;}
</style>
</head>
<body>
<button onclick="addDiv()">click</button>
<script>
function addDiv(){
// new一个div对象
let breakout = new Breakout(20,50);
breakout.init();
}
function Breakout(x,y) { //对象 构造函数
this.x = x;
this.y = y;
}
Breakout.prototype = { //原型方法
init() { //初始化系统
this.createDiv();
this.divStar(); //初始化div
},
createDiv(){
let brick = document.createElement("div");
document.body.appendChild(brick);
this.Odiv = brick;
},
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;
this.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);
},
}
</script>
</body>
</html>
标签：动画,style,Odiv,disX,disY,px,js,面向对象,div 来源： https://www.cnblogs.com/duanhuarong/p/12196631.html