当前位置：网站首页>小女孩行走

小女孩行走

2022-04-23 09:01:00 【一个博客】

小女孩行走

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小女孩找妈妈</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            position: absolute;
            background-image: url('./image/xnh.png');
            height: 106px;
            width: 82px;
            background-position:0px  -212px;
            left: 0;
        }
    </style>
</head>
<body>
    <script src="./underscore-min.js"></script>
    <script>
        //创建构造函数
        function Gril(){
                                                    //创建一个div节点
            this.dom=document.createElement("div");
            document.body.appendChild(this.dom);    //div节点添加到body中
            var self=this;                          //保存当前的this指向
            this.x=0;                               //定义从左往右走的步伐
            this.speed=_.random(1,10);              //控制步伐速度
            this.state=0;                           //定义图片的宽度的移动
            this.ismove=true;                       //小女孩在行走
            this.dom.onclick=function(){            //图片点击后的动作
                if(self.ismove){                    //判断是否在行走，如果是就执行，if后的语句
                    clearInterval(self.timer);      //清除定时器
                    self.ismove=false;              //小女孩没在行走
                }
                else{                               //如果没在行走，就执行
                    self.move();                    //开启定时器
                    self.ismove=true;
                }            
            }
            this.move()                             //默认在行走
        }
        Gril.prototype.move=function(){             //创建原型对象
            var self=this;                          //保存当前的this指向
            this.timer=setInterval(function(){      //把定时器保存在timer属性中
                self.state++;                       //把图片的移动自增
                self.x+=_.random(1,10);             //随机步伐速度
                if (self.state>=8) {                //if判断图片是第几张，如果大于最后一张，从第一张开始
                    self.state=0
                }
                self.dom.style.backgroundPosition=-82*self.state+"px -"+self.state+"px";//图片的位置
                self.dom.style.left=self.x+"px";                                      //向左边行走的速度
            }, this.speed*100);
        }
        //for循环动态创建10图片
        for (var i = 0; i < 10; i++) {
            new Gril();    
        }
        
    </script>
</body>
</html>

版权声明
本文为[一个博客]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_45784582/article/details/106335814

边栏推荐

猜你喜欢

随机推荐