打开页面,一个可爱的girl自动行走。如图:
主要思路:
设置一个div,大小为girl图片的大小。背景图设为一个图片。(精灵图)
设置定时器,每隔几秒div向右移动多少距离,同时div里的背景图片更换位置
我利用的是第三行的图片。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.box{
width:79px;
height:108px;
background: url(img/girl.png) no-repeat;
background-position: 0px -216px;
position: absolute;
top:400px;
left: 0px;
}
</style>
<body>
<div class="box">
</div>
<script>
var box = document.querySelector("div");
// div的位置
var nowleft = 0;
// 图片的索引,从0到7.当index>7的时候,index变为0,重新开始
var index = 0;
var timer = setInterval(function(){
nowleft +=6;
index++;
if (index >7) index = 0;
if(nowleft>1000){
nowleft = 1000;
clearInterval(timer);
}
box.style.left = nowleft+"px";
box.style. backgroundPosition = -79*index + "px -216px";
},50);
</script>
</body>
</html>
运行结果如下:
封装函数,方便操作:
需要一个girl行走的话,这样 很方便。但是,当需要1000 个女孩行走的话,这样就显得很麻烦,因此需要封装,需要几个girl行走,调用方法就行了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div{
width: 79px;
height: 108px;
background: url('img/girl.png') no-repeat;
background-position: 0px -216px;
position: absolute;
}
</style>
<body>
<script>
function Girl(left,top){
//记录位置
this.left = left;
this.top = top;
this.timer = null;
//初始化,新加div
this.init = function (){
this.dom = document.createElement("div");
document.body.appendChild(this.dom);
this.dom.style.left = this.left +"px";
this.dom.style.top = this.top +"px";
}
//移动函数
this.move = function (){
var index = 0;
//在定时器的内部,this指的是window,因此在进入定时器之前,先用self把this替换一下。
var self = this;
this.timer = setInterval(function(){
index++;
if(index>7) index = 0;
self.left += 5;
if(self.left>1000) self.end();
self.dom.style.left = self.left +"px";
self.dom.style.backgroundPosition = -79*index+"px -216px";
},50);
}
//结束函数,到终点时候, 停止计时器 div自动消失,
this.end = function (){
clearInterval(this.timer);
// console.log(this.dom);
document.body.removeChild(this.dom);
}
this.init();
this.move();
}
new Girl(100,160);
new Girl(300,200);
</script>
</body>
</html>
或者利用定时器,每隔1秒可以出现一个小女孩。div的left为0,top为0-500的任意一个整数。
// setInterval(function () {
// new Girl(0, parseInt(Math.random() * 500))
// }, 1000);
运行结果如下: