一、实现功能

（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="雪竹 女生 雪景 人头像 黑发 单马尾 宝剑.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 实现雪花效果相关推荐

php实现页面雪花效果,JavaScript_使用javascript实现雪花飘落的效果，看了javascript网页特效实例大全 - phpStudy...
使用javascript实现雪花飘落的效果看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈 ...
java雪花纷飞_下雪了 javascript实现雪花飞舞
本文实例为大家分享了雪花飞舞效果javascript实现,供大家参考,具体内容如下原理: 1.js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果. 2.js获取创建的DIV并 ...
十六、Javascript实现放大镜效果
@Author:Runsen @Date:2020/6/1 作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件.导致翘课严重,专业排名 ...
javascript瀑布流效果
javascript瀑布流效果其实javascript瀑布流前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...
JavaScript 省市级联效果
为什么80%的码农都做不了架构师?>>> JavaScript 省市级联效果 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
基于JavaScript实现放大镜效果
基于JavaScript实现放大镜效果描述:右侧图片必须是左侧图片的倍数大,主要是获取鼠标相对与被触发元素的坐标位置,再通过位置定位实现效果 <!DOCTYPE html> <ht ...
用MVC来实现javaScript的时间效果
用MVC来实现javaScript的时间效果开发工具与关键技术: MVC javascript 作者:沈金凤年级:18级(5)班撰写日期:2019年2月11日除了再Html中写javaScri ...
JavaScript 图片切割效果（带拖放、缩放效果）
JavaScript 图片切割效果(带拖放.缩放效果) 转载于:https://www.cnblogs.com/xiaoluozi513/archive/2008/11/14/1333882.html
js实现雪花效果(超简单)
打个广告,最底下的公众号,可以每天领外卖红包.打车优惠券还有96折充值电费等,需要的可以关注一下哦使用js实现雪花飘落效果,话不多说直接上代码 <!DOCTYPE html> <h ...

JavaScript 实现雪花效果

JavaScript 实现雪花效果

一、实现功能

二、展示

1.代码展示

2.效果展示

总结

JavaScript 实现雪花效果相关推荐

最新文章

热门文章