<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
width: 700px;
height: 500px;
border: 2px solid black;
position: relative;
top: 100px;
left: 200px;
}
.qq {
position: absolute;
width: 30px;
height: 30px;
background-color: red;
border-radius: 50%;
background:red;
background-size: 30px 30px;
}
</style>
</head>
<body style="background: url(img/timg.jpg)no-repeat;background-size:100% 700px ; ">
<div id="box">
</div>
<script type="text/javascript">
function Arr(left, top) {
this.box = document.getElementById("box")
this.qiu = document.createElement("p");
this.box.appendChild(this.qiu);
this.qiu.className = "qq"
this.lol = 30
this.left = left || Math.random() * (box.clientWidth - this.lol);
this.top = top || Math.random() * (box.clientHeight - this.lol);
this.qiu.style.left = this.left + "px"
this.qiu.style.top = this.top + "px"
this.oX = parseInt(Math.random() * 1+5) ;
this.oY = parseInt(Math.random() * 1+4) ;
this.tex()
}
Arr.prototype.tex = function() {
var sty = this
var jishi = setInterval(function() {
sty.left += sty.oX
sty.top += sty.oY
sty.qiu.style.left = sty.left + "px"
sty.qiu.style.top = sty.top + "px"
if(sty.left >= box.clientWidth - sty.lol || sty.left <= 0)
{ sty.oX = -sty.oX }
if(sty.top >= box.clientHeight - sty.lol || sty.top <= 0) { sty.oY = -sty.oY}
}, 10)
console.log(sty.left)
}
for (var i = 0; i <5; i++) {
new Arr()
}
</script>
</body>
</html>