原生js实现随机雪花落下特效

原生js随机生成不同数量、速度不同的雪花从屏幕上方落下，可修改各种配置生成自己的雪花特效。

var snowStatus = false;
var snow1 = './images/snow1.png'; //雪花图片1
var snow2 = './images/snow2.png'; //雪花图片2
var $MaxX = document.documentElement.clientWidth;
var $MaxY = document.documentElement.clientHeight;
var zIndex = 9994;
var snowBox = document.createElement('div');
document.body.appendChild(snowBox);
var snowData = {status: false
}//开始下雪
function beginSnow(){snowData.status = true;var randomTime2 = randomNum(0,4000); //随机时间召唤一个雪花createSnow();setTimeout(randomTime,randomTime2)
}//停止下雪
function stopSnow(){snowData.status = false
}function removeSnow(){snowBox.remove();
}function randomTime(){if(snowData.status){var randomTime2 = randomNum(0,4000); //随机时间召唤一个雪花createSnow();setTimeout(randomTime,randomTime2)}
}
function createSnow(){var snowWidth = randomNum(50,80); //雪花的随机大小var randomX = randomNum(0,$MaxX - snowWidth); var randomNumm = randomNum(1,2);//雪花的随机图片var $randomImg = document.createElement('img');var snowSpeed = randomNum(8,12);snowBox.appendChild($randomImg);$randomImg.setAttribute('style',`width: ${snowWidth}px;height: auto;position:fixed;z-index:${zIndex};top:-${snowWidth}px;left:${randomX}px;`);if(randomNumm == 1){$randomImg.setAttribute('src',snow1);}else{$randomImg.setAttribute('src',snow2);}var normalStyle = `width: ${snowWidth}px;height: auto;position:fixed;z-index:${zIndex};top:-${snowWidth}px;left:${randomX}px;`setTimeout((res) => {$randomImg.setAttribute('style',normalStyle + `transform: translateY(${$MaxY + snowWidth}px) rotateZ(360deg);transition: transform ${snowSpeed}s linear`);setTimeout((res) => {$randomImg.setAttribute('style',normalStyle + `transform: translateY(${$MaxY + snowWidth}px) rotateZ(360deg);opacity: 1;transition: transform,opacity ${snowSpeed}s,1s linear`);setTimeout((res) => {$randomImg.setAttribute('style',normalStyle + `transform: translateY(${$MaxY + snowWidth}px) rotateZ(360deg);opacity: 0;transition: transform,opacity ${snowSpeed}s,2s linear`);setTimeout((res) => {$randomImg.remove();},2000)},2000)},snowSpeed * 1000 - 4000)},100)}
// 创建一个minNum到maxNum的随机数字
function randomNum(minNum,maxNum){ switch(arguments.length){ case 1: return parseInt(Math.random()*minNum+1,10); break; case 2: return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); break; default: return 0; break; }
}

原生js实现随机雪花落下特效相关推荐

使用原生Js实现随机点名
使用原生Js实现随机点名最近学了一点前端内容,老师让用js设计一个班里的随机点名器.就尝试写了一个,具体实现效果如图: 实现代码: <!DOCTYPE html> <html la ...
html鼠标点击有手势出来,用原生js+css3撸的一个下拉手势事件插件
; (function () { var DropDown = function (dropId = 'dropDwon', distance = 60, callBack = () => {} ...
原生JS实现切换不同图片的特效
分享一个由原生JS实现的图片切换特效,效果如下: 原理比较简单,实现的代码如下: <!doctype html> <html><head><meta char ...
原生JS实现拖拽翻书特效
给大家分享一个用原生JS实现的拖拽翻书效果图,效果如下: 效果还不错吧,当然还需要两个图片. 1.书本封面. 2.书页实现代码如下,欢迎大家复制粘贴. <!DOCTYPE html> & ...
使用原生js实现歌曲上一曲/下一曲
使用原生js+jqery写的网页播放器实现下一曲/上一曲功能数据库使用的是leancloud,对象储存使用的是七牛云. 先上代码(下一曲): nextSong() {$('.nextSong').o ...
原生JS开箱随机抽奖代码
下载地址原生JS制作开箱随机抽奖小游戏,思路比较简单,十分实用!您可以随意定制抽奖奖品,点击开启按钮,箱子筛选随机产生中奖结果弹窗提示.ps:演示内容无任何含义. dd:
IOS 粒子发射器，雪花落下、创建火焰、河流、蒸汽的动画效果源代码
学习神奇的粒子发射器,雪花纷纷落下的动画效果,就是通过CAEmitterLayer来实现的,这个layer还能创建火焰,河流,蒸汽的动画效果,常用于游戏开发. 原文来自code4app http:// ...
jquery+原生js模拟淘宝输入框下拉提示
1.概述: 模拟淘宝.百度的搜索框,当用户输入时,会自动下拉提示关键字,使用组件jquery.js(1.12.1),jquery-ui.js(1.12.1).jquery-ui.css(1.12.1) ...
原生JS实现随机点名项目
核心思想随机产生规定范围内的整数,然后再产生相同范围内的整数,两者相同时,则暂停. 所用知识 Math.random() * num: 产生从0到num的随机数 Math.floor(): 向下取整 ...

原生js实现随机雪花落下特效

原生js实现随机雪花落下特效相关推荐

最新文章

热门文章