JS实现下落的树叶特效OVER

62 阅读 0 评论 41 点赞

我是靠谱客的博主优雅画板，最近开发中收集的这篇文章主要介绍JS实现下落的树叶特效OVER，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在这里插入图片描述
用以上四种树叶图片在页面中随机生成大小、位置、下落速度不同的特效，点击页面任何位置，实现下落效果。具体代码如下：

测试代码：

<!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>Document</title>
    <style>
        img{
            position: absolute;
        }
    </style>
</head>
<body>
    <!-- 
            叶子 
            属性：  大小(100-150)  位置  图片  速度
            方法：  初始化  下落 
    -->
    <script>
        var screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
        var screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
        function Leaf(){
            this.width = Math.random()*50+100;
            this.pos = {
                left:Math.random()*(screenWidth-this.width),
                top:0
            }
            this.speed = 5;
            var oImg = new Image();
            oImg.src = "img/" +( Math.floor(Math.random()*4)+1) + ".png";
            oImg.style.width = this.width + "px";
            oImg.style.left = this.pos.left + "px";
            oImg.style.top = this.pos.top + "px";
            this.img = oImg;   

        }
        Leaf.prototype.init = function(){//插入到页面中
            document.body.appendChild(this.img);
        }
        Leaf.prototype.fall = function(){
            var that = this;  //因为定时器中this指向window 所以先将this存在that中，用来在定时器中使用
            setTimeout(function(){ //延迟不同时间下落
                this.timer = setInterval(function(){ //定时器中this指向Window
                    if(that.img.offsetTop >= screenHeight-that.img.offsetHeight){ //判断是都到达底部
                        clearInterval(that.timer);
                    }else{
                        that.img.style.top = that.img.offsetTop + that.speed +"px";
                    }
                },10);
            },Math.random()*500);
        }
        var arr = [];
        for(var i=0;i<5;i++){
            var leaf = new Leaf();
            arr.push(leaf);
            leaf.init();
        }
        document.onclick = function(){
            for(var j=0;j<arr.length;j++){
                arr[j].fall();
            }
        }
        

    </script>
</body>
</html>