当前位置：网站首页>Little girl walking

Little girl walking

2022-04-23 09:05:00 【A blog】

Little girl walking 

<!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> The little girl is looking for her mother </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>
        // Create constructor 
        function Gril(){
                                                    // Create a div node 
            this.dom=document.createElement("div");
            document.body.appendChild(this.dom);    //div Add nodes to body in 
            var self=this;                          // Save the current this Point to 
            this.x=0;                               // Define the pace from left to right 
            this.speed=_.random(1,10);              // Control your pace 
            this.state=0;                           // Defines the movement of the width of the picture 
            this.ismove=true;                       // The little girl is walking 
            this.dom.onclick=function(){            // Action after clicking the picture 
                if(self.ismove){                    // Judge whether you are walking , If so, execute ,if The following sentence 
                    clearInterval(self.timer);      // Clear timer 
                    self.ismove=false;              // The little girl is not walking 
                }
                else{                               // If you're not walking , Is executed 
                    self.move();                    // Turn on timer 
                    self.ismove=true;
                }            
            }
            this.move()                             // The default is walking 
        }
        Gril.prototype.move=function(){             // Create prototype objects 
            var self=this;                          // Save the current this Point to 
            this.timer=setInterval(function(){      // Save the timer in timer Properties of the 
                self.state++;                       // Increase the movement of the picture 
                self.x+=_.random(1,10);             // Random pace speed 
                if (self.state>=8) {                //if Judge which picture is the first , If it's bigger than the last one , Start with the first one 
                    self.state=0
                }
                self.dom.style.backgroundPosition=-82*self.state+"px -"+self.state+"px";// Picture location 
                self.dom.style.left=self.x+"px";                                      // The speed of walking to the left 
            }, this.speed*100);
        }
        //for Loop dynamic creation 10 picture 
        for (var i = 0; i < 10; i++) {
            new Gril();    
        }
        
    </script>
</body>
</html>

版权声明
本文为[A blog]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204230901327211.html

边栏推荐

猜你喜欢

随机推荐