JavaScript实现雪花飘落效果
本文实例为大家分享了JavaScript实现雪花飘落效果的具体代码,供大家参考,具体内容如下
一、实现功能
(1)添加一个背景图片;
(2)用js语言实现雪花飘落效果;
(3)使用setInterval定时器每800毫秒创建一个雪花;
(4)把每一个雪花作为参数传进动态下落的方法中即可。
二、展示
1.代码展示
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-color: #000; /*防止出现向下滚动条*/ overflow: hidden; } </style> </head> <body> <img src="1.jpg" style="height: 800px; width:1500px;"> <script> function snow() { // 1、定义一片雪花模板 var flake = document.createElement('div'); // 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺ flake.innerHTML = '❅'; flake.style.cssText = 'position:absolute;color:#fff;'; //获取页面的高度 相当于雪花下落结束时Y轴的位置 var documentHieght = window.innerHeight; //获取页面的宽度,利用这个数来算出,雪花开始时left的值 var documentWidth = window.innerWidth; //定义生成一片雪花的毫秒数 var millisec =10; //2、设置第一个定时器,周期性定时器,每隔一段时间(millisec)生成一片雪花; setInterval(function() { //页面加载之后,定时器就开始工作 //随机生成雪花下落 开始 时left的值,相当于开始时X轴的位置 var startLeft = Math.random() * documentWidth; //随机生成雪花下落 结束 时left的值,相当于结束时X轴的位置 var endLeft = Math.random() * documentWidth; //随机生成雪花大小 var flakeSize = 3 + 20 * Math.random(); //随机生成雪花下落持续时间 var durationTime = 4000 + 7000 * Math.random(); //随机生成雪花下落 开始 时的透明度 var startOpacity = 0.7 + 0.3 * Math.random(); //随机生成雪花下落 结束 时的透明度 var endOpacity = 0.2 + 0.2 * Math.random(); //克隆一个雪花模板 var cloneFlake = flake.cloneNode(true); //第一次修改样式,定义克隆出来的雪花的样式 cloneFlake.style.cssText += ` left: ${startLeft}px; opacity: ${startOpacity}; font-size:${flakeSize}px; top:-25px; transition:${durationTime}ms;`; //拼接到页面中 document.body.appendChild(cloneFlake); //设置第二个定时器,一次性定时器, //当第一个定时器生成雪花,并在页面上渲染出来后,修改雪花的样式,让雪花动起来; setTimeout(function() { //第二次修改样式 cloneFlake.style.cssText += ` left: ${endLeft}px; top:${documentHieght}px; opacity:${endOpacity};`; //4、设置第三个定时器,当雪花落下后,删除雪花。 setTimeout(function() { cloneFlake.remove(); }, durationTime); }, 0); }, millisec); } snow(); </script> </body> </html>
2.效果展示
代码如下(示例):
总结
学会了使用JS语言实现雪花飘落特效效果;运用了定时器控制雪花出现的速度;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
JavaScript实现页面滚动图片加载(仿lazyload效果)
网上的很多这样的效果都是用jQuery的方法,可是如果不用jQuery的站长难道就不能用这种方法了么2011-07-07Uncaught SyntaxError:Unexpected token '<' (
这篇文章主要为大家介绍了JS判断趋近于直线的多边形(退化多边形)实例探究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2024-01-01js getBoundingClientRect使用方法详解
这篇文章主要介绍了js getBoundingClientRect使用方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
这篇文章主要介绍了改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07asp.net中System.Timers.Timer的使用方法
asp.net中System.Timers.Timer的使用方法,需要的朋友可以参考一下2013-03-03
最新评论