군인 사진 링크 : http://www.aigei.com/view/73716.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
//position: relative;
position: absolute;
width: 50px;
height: 100px;
background: url(img/shi.png);
background-position: 0px -200px;
//border: 1px black solid;
//float: left;
}
</style>
</head>
<body>
</body>
</html>
<script>
function Bing(){
this.x=0
this.l=0
this.isMove=true
this.t=parseInt(Math.random()*500)
this.init()
arr.push(this)
this.bind()
}
Bing.prototype.bind=function(){
var self=this
this.dom.onclick=function(){
self.isMove=!self.isMove
}
}
Bing.prototype.init=function(){
this.dom=document.createElement("div")
this.dom.style.top=this.t+'px';
document.body.appendChild(this.dom)
}
Bing.prototype.update=function(){
if(this.isMove==false) return
this.x++;
this.l+=5;
if(this.x>3) x=0;
this.dom.style.backgroundPosition=-this.x*50+"px -200px"
this.dom.style.left=this.l+'px'
}
var arr=[];
var time=0
setInterval(function(){
time++
if(time%10==0) new Bing
for(var i=0;i<arr.length;i++){
arr[i].update()
}
},100)
</script>