大家也许见过到以下场景：
1、逢年过年或活动日，各大网站（淘宝，京东等）飘着漫天红包；
2、下雨下雪的时候美团上的外卖地图上会有飘雨飘雪的景象；
3、手机里的天气背景有电闪雷鸣的效果；
下面用原生js给大家简单实现一个漫天飘雪的动效。
在开始编程之前，我们先简单理一下思路（实现这样的效果步骤）：
1、js动态增加div；
2、div每10秒下降3px；透明度减少0.003；
3、当div降落到屏幕底部时，移除这个div；
4、重复以上操作。
上代码：
//增加div
function addChild(top,snowShape) {
???var div = document.createElement("div");
???div.innerHTML = snowShape;
???div.className = "flake";
???div.style.position = ‘absolute‘;
???div.style.color = ‘white‘;
???div.style.opacity = 0.9;
???div.style.left = parseInt(Math.random() * window.innerWidth) + ‘px‘;
???div.style.top = top + ‘px‘;
???div.style.fontSize = parseInt(Math.random() * 50) + ‘px‘;
???document.body.appendChild(div);
};
//雪花自动降落
function autoWipe(snowSpeed,snowShape) {
???var flake = document.getElementsByClassName(‘flake‘);
???var timer = setInterval(function () {
???????for (var i = 0; i < flake.length; i++) {
???????????var opacity = flake[i].style.opacity;
???????????var offsetTop = Number((flake[i].style.top).replace(‘px‘,‘‘));
???????????if (offsetTop < window.innerHeight) {
???????????????offsetTop = offsetTop + snowSpeed;
???????????????opacity = opacity - 0.003;
???????????????flake[i].style.top = offsetTop + ‘px‘;
???????????????flake[i].style.opacity = opacity;
???????????} else {
???????????????document.body.removeChild(flake[i]);
???????????????addChild(0,snowShape);
???????????}
???????}
???}, 100);
};
//调用以上方法
function final(bigSnowParam,snowShape) {
???for (var i = 0; i < bigSnowParam.snowNum; i++) {
???????addChild(parseInt(Math.random() * window.innerHeight),snowShape);
???}
???autoWipe(bigSnowParam.snowSpeed,snowShape);
};
//形成最后效果
function final(bigSnowParam,snowShape) {
???for (var i = 0; i < bigSnowParam.snowNum; i++) {
???????addChild(parseInt(Math.random() * window.innerHeight),snowShape);
???}
???autoWipe(bigSnowParam.snowSpeed,snowShape);
};
参数值
//大雪参考值
var bigSnowParam = {
??????snowNum:242,
??????snowSpeed:6
};
//中雪参考值
var midSnowParam = {
???snowNum:242,
???snowSpeed:3
};
//小雪参考值
var littleSnowParam = {
???snowNum:242,
???snowSpeed:1
};
//自定义雪参考值
var selfSnowParam = {
???snowNum:‘‘,//值为number
???snowSpeed:‘‘//值为number
};
//雪花形状参考
var snowShapeObj = {
???1:‘?‘,
???2:‘?‘,
???3:‘?‘,
???4:‘?‘,
???5:‘?‘,
???6:‘?‘,
???7:‘?‘,
???8:‘?‘,
???9:‘?‘,
???10:‘?‘,
???11:‘?‘
};
//调用
final(bigSnowParam,snowShapeObj[1]);
效果图(不能上传视频，只能截图)
js实现飘雪效果
原文地址：https://www.cnblogs.com/xpwu/p/10385909.html