行走的girl

最新推荐文章于 2021-08-25 14:55:58 发布

weixin_43700362

最新推荐文章于 2021-08-25 14:55:58 发布

阅读量235

点赞数

文章标签：定时器精灵图

本文链接：https://blog.csdn.net/weixin_43700362/article/details/103098374

版权

打开页面，一个可爱的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);

运行结果如下：

在这里插入图片描述

weixin_43700362

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
行走的girl

打开页面，一个可爱的girl自动行走。如图：主要思路：设置一个div，大小为girl图片的大小。背景图设为一个图片。（精灵图）设置定时器，每隔几秒div向右移动多少距离，同时div里的背景图片更换位置我利用的是第三行的图片。代码如下：<!DOCTYPE html><html lang="en"><head> <meta cha...
复制链接

扫一扫