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 = sizemydiv.style.height = sizemydiv.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 = falseclearInterval(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)*2var y = Math.cos(angle+parseFloat(allSnow[i].style.height.slice(0,-2)))+1+parseFloat(allSnow[i].style.height.slice(0,-2))/2allSnow[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
点击进入

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

JS实现炫酷雪花飘落效果
用js实现漂亮的雪花飘过效果: 步骤: 页面基本样式,雪花旋转动画效果 body{width: 100vw;height: 100vh;background-color: #000;overflow: ...
html js满屏飘雪特效,JS实现炫酷雪花飘落效果
用js实现漂亮的雪花飘过效果: 步骤: 页面基本样式,雪花旋转动画效果 body{ width: 100vw; height: 100vh; background-color: #000; overf ...
HTML圣诞节代码，圣诞节贺卡源代码，实现圣诞节雪花飘落效果
HTML圣诞节代码,圣诞节贺卡源代码,实现圣诞节雪花飘落效果完整代码下载地址:HTML圣诞节代码,圣诞节贺卡源代码,实现圣诞节雪花飘落效果 index.html <!DOCTYPE html& ...
JS实现逼真的雪花飘落特效
逼真的雪花飘落特效效果图: 图片素材 : --> ParticleSmoke.png 代码如下,复制即可使用: <!doctype html> <html> <h ...
java实现物体下落效果_手撸一个物体下落的控件，实现雪花飘落效果
效果图: 圣诞登录页.gif 参考文章: Android自定义View--从零开始实现雪花飘落效果感谢原文作者,不仅实现了效果,并且写得非常详细,还做了优化.笔者参考原文作者的源码,做了一点修改,实 ...
python实现雪花飘落效果_python实现雪花飘落效果实例讲解及源码分享！
点击蓝字"python教程"关注我们哟! 前言 Python现在非常火,语法简单而且功能强大,很多同学都想学Python!所以小的给各位看官们准备了高价值Python学习视频教程及 ...
java飘落的雪花_[Java教程]实现雪花飘落效果
[Java教程]实现雪花飘落效果 0 2016-11-02 21:00:17 雪花飘落 body{background:#000;background: url(http://www.wallcoo. ...
android雪花飘落效果,【OpenGL】Shader实例分析（七）- 雪花飘落效果
研究了一个雪花飘落效果.感觉挺不错的.分享给大家,效果例如以下: 代码例如以下: Shader "shadertoy/Flakes" { // https://www.shader ...
Android之雪花飘落效果
Android之雪花飘落效果一:效果图二:实现步骤 1:FallObject 下落物体封装 2:自定义雪花飘View 3:xml布局 4:activity使用三:最后一:效果图 Androi ...
HTML5 小练习2—仿华为官网（实现随机雪花飘落效果）
文章目录一.界面展示二.突出显示效果(当鼠标指向时) 1.广告部分动画 2.商品价格突出显示 3.导航栏文字突出显示三.项目目录四.CSS样式代码 1.雪花部分实现五.页面代码 1.inde ...

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

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

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

最新文章

热门文章