<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
div.girl {
width:79px;
height:108px;
background:url(aisidier.png) 0 -216px no-repeat;
position:absolute;
}
div.end {
border:2px solid #000;
position:absolute;
left:1000px;
top:0;
height:100%;
}
</style>
</head>
<body>
<div class="end"></div>
<script>
var girls = [];
function Girls(){
this.x = 0;
this.y = parseInt(Math.random()*(document.documentElement.clientHeight - 108));
this.speed = parseInt(Math.random()*10)+1;
this.step = 0;
this.isMove = true;
this.init();
this.update();
this.bindEvent();
girls.push(this);
}
Girls.prototype.init = function(){
this.dom = document.createElement('div');
this.dom.className = "girl";
document.body.appendChild(this.dom); //上树
};
Girls.prototype.update = function(){
if(!this.isMove)
return;
this.x += this.speed;
if(this.x > 1000){
this.goDeid();
}
this.step++;
if(this.step > 7){
this.step = 0;
}
this.dom.style.left = this.x+"px";
this.dom.style.top = this.y+"px";
console.log("left:",this.dom.style.left ,"top:",this.dom.style.top);
this.dom.style.backgroundPosition = -this.step*79+"px -216px";
};
Girls.prototype.goDeid = function(){
document.body.removeChild(this.dom); //下树
for(var i=0;i<girls.length;i++){
if(girls[i] == this){
girls.splice(i,1);
}
}
};
Girls.prototype.bindEvent = function(){
var _this = this;
this.dom.onclick = function(){
_this.isMove = !_this.isMove;
};
};
setInterval(function(){
for(var i=0;i<girls.length;i++){
girls[i].update();
}
},100);
new Girls();
new Girls();
new Girls();
new Girls();
new Girls();
new Girls();
</script>
</body>
</html>
图片在文件中