当前位置：主页 > 查看内容

JavaScript实现雪花飘落效果

发布时间：2021-05-21 00:00| 有 位朋友查看

简介：本文实例为大家分享了JavaScript实现雪花飘落效果的具体代码，供大家参考，具体内容如下 一、实现功能 （1）添加一个背景图片； （2）用js语言实现雪花飘落效果； （3）使用setInterval定时器每800毫秒创建一个雪花； （4）把每一个雪花作为参数传进动态下落……

本文实例为大家分享了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语言实现雪花飘落特效效果；运用了定时器控制雪花出现的速度；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持站长技术。


原文链接：https://m.jb51.net/article/202946.htm
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：一个手机自适应的网页效果解决显示页面很小的问题 下一篇：微信小程序自定义胶囊样式

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐