js实现飘雪效果

Posted 2021-02-09 xpwu

大家也许见过到以下场景：

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]);
效果图(不能上传视频，只能截图)