js实现漂亮的雪花飘落效果

Bertha 。 2022-12-25 00:47 158阅读 0赞

### js实现漂亮的雪花飘落效果 ###

效果如下：

雪花飘落

四个按钮控制雪花的生成与停止

关键代码：  
这个代码还有许多不足，希望大佬指正

var W = window.innerWidth;   //获取屏幕的宽高
    var H = window.innerHeight;
    var add_snow = null;         //把add_snow定时器全局变量，方便删除
    var angle = 0;               //增加参数
    var flag = false;            //是否有雪花元素
    
    //增加雪花
    function add() { 
        for (var i = 1; i <= 100; i++) { 
            var mydiv = document.createElement("div");
            var size = Math.random()*24+1+"px";
            mydiv.style.width = size
            mydiv.style.height = size
            mydiv.style.backgroundImage="url('images/white-snow.png')";
            mydiv.style.backgroundSize="cover";
            mydiv.style.position = "absolute";
            mydiv.style.left = Math.random() * (W-50) + "px";
            mydiv.style.top = Math.random() * (H-50) + "px";
            flag = true;
            document.body.appendChild(mydiv);
        }
    }
    
    //开始雪花沈阳
    function start(){ 
        if (add_snow){ 
    
        }else { 
            add_snow = setInterval(function (){ 
                update()
            },100)
        }
    }
    
    //删除雪花元素
    function del() { 
        var allSnow = document.getElementsByTagName("div");
        var length = allSnow.length;
        for (var i = 0; i < length; i++) { 
            // document.body.removeChild(allSnow[i]); // 删除body的子节点
            allSnow[0].remove();                // 直接将该元素删
    // allSnow[i].style.display = "none"; // 通过设置元素为不可见来模拟删除
        }
        flag = false
        clearInterval(add_snow)
        add_snow = null;
    }
    
    //雪花的下落效果
    function update(){ 
        if (flag){ 
            angle += 0.01;
            var allSnow = document.getElementsByTagName("div");
            var length = allSnow.length;
            for (var i = 0; i < length; i++) { 
                var x = Math.sin(angle)*2
                var y = Math.cos(angle+parseFloat(allSnow[i].style.height.slice(0,-2)))+1+parseFloat(allSnow[i].style.height.slice(0,-2))/2
                allSnow[i].style.left = x+parseFloat(allSnow[i].style.left.slice(0,-2)) + "px";
                allSnow[i].style.top = y +parseFloat(allSnow[i].style.top.slice(0,-2))+ "px";
                var x1 = x+parseFloat(allSnow[i].style.left.slice(0,-2));
                var y1 = y +parseFloat(allSnow[i].style.top.slice(0,-2));
                if(x1 > W-50 || x1 < 0||  y1 > H-50)
                { 
                    allSnow[i].style.left = Math.random() * (W-50) + "px";
                    allSnow[i].style.top = 20 + "px";
                }
            }
        }else { 
            add()
        }
    
    }
    
    //暂停雪花效果
    function stop(){ 
        clearInterval(add_snow)
        add_snow = null;
    }

项目的下载地址：  
https://github.com/Try-your-best-to-do/snow  
[点击进入][Link 1]

[Link 1]: https://github.com/Try-your-best-to-do/snow

发表评论取消回复

表情：

评论列表（有 0 条评论，158人围观）

还没有评论，来说两句吧...

相关阅读

相关制作雪花飘落特效

制作雪花飘落特效前言图形图像处理是计算机视觉的重要分支之一，也是很多其他领域的基础，如机器学习、人工智能等。OpenCV-Python 是一个基于 Python 的开源

迈不过友情╰/ 2024年03月17日 17:35/ 0 赞/ 50 阅读

相关 php实现页面雪花效果,CSS3如何实现雪花飘落的效果

通过CSS3中的animation属性来设置动画名称，动画时间、速度以及动画是否循环播放来实现雪花飘落的效果今天将要分享的是利用CSS3中的animation属性来实现雪花

ゝ一世哀愁。/ 2023年01月17日 08:20/ 0 赞/ 119 阅读

相关 js实现漂亮的雪花飘落效果

js实现漂亮的雪花飘落效果效果如下：雪花飘落四个按钮控制雪花的生成与停止关键代码：这个代码还有许多不足，希望大佬指正 var W =

Bertha 。/ 2022年12月25日 00:47/ 0 赞/ 159 阅读

相关 java实现物体下落效果_手撸一个物体下落的控件，实现雪花飘落效果

效果图： ![AAffA0nNPuCLAAAAAElFTkSuQmCC][] 圣诞登录页.gif 参考文章： Android自定义View——从零开始实现雪花飘落效果

墨蓝/ 2022年11月10日 05:26/ 0 赞/ 184 阅读

相关全屏3D雪花飘落html代码,html5 ThreeCanvas.js全屏3D大雪花飘落动画特效

特效描述：html5 ThreeCanvas.js 全屏3D 大雪花飘落动画特效。全屏逼真雪花飘落特效，可随鼠标移动。代码结构 1. 引入JS 2. HTML代码

àì夳堔傛蜴生んèń/ 2022年10月07日 07:58/ 0 赞/ 176 阅读

相关用纯CSS3的animation制作雪花飘落、星星闪烁、按钮缩放、图片倾斜

雪花飘落： //雪花飘落 .snowDown { animation: snowDown 3s linear infinite normal; -webkit-ani

淡淡的烟草味﹌/ 2022年09月26日 15:55/ 0 赞/ 201 阅读

相关 Query雪花飘落背景特效

[下载地址![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220828/5ae7a8091ab54da

雨点打透心脏的1/2处/ 2022年09月11日 03:29/ 0 赞/ 151 阅读

相关简单说 JavaScript实现雪花飘落效果

说明这次实现的雪花飘落的效果很简单，主要是为了练习练习JavaScript中的定时器，setTimeout 和 setInterval。效果图 ![这里写图片

深藏阁楼爱情的钟/ 2022年06月05日 11:05/ 0 赞/ 660 阅读

相关 css3实现漂亮的倒影效果

实际上还有很多CSS新属性并未包含进CSS3官方标准中。-webkit-box-reflect属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征。-webkit-box

缺乏、安全感/ 2022年04月01日 06:28/ 0 赞/ 296 阅读

相关 CSS实现漂亮的小水球效果

先看效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

灰太狼/ 2021年07月26日 12:51/ 0 赞/ 491 阅读