JavaScript实现雪花飘落效果


Posted in Javascript onDecember 27, 2020

本文实例为大家分享了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.效果展示

代码如下(示例):

JavaScript实现雪花飘落效果

总结

学会了使用JS语言实现雪花飘落特效效果;运用了定时器控制雪花出现的速度;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js控制div及网页相关属性的代码
Dec 19 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
微信小程序自定义胶囊样式
Dec 27 #Javascript
JS实现鼠标移动拖尾
Dec 27 #Javascript
JavaScript实现滚动加载更多
Dec 27 #Javascript
jQuery实现简单轮播图效果
Dec 27 #jQuery
JavaScript实现瀑布流布局的3种方式
Dec 27 #Javascript
Vue实现省市区三级联动
Dec 27 #Vue.js
JavaScript实现通讯录功能
Dec 27 #Javascript
You might like
php处理json时中文问题的解决方法
2011/04/12 PHP
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
写了个监控nginx进程的Python脚本
2012/05/10 Python
Python实现子类调用父类的方法
2014/11/10 Python
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
python创建n行m列数组示例
2019/12/02 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
Python进行统计建模
2020/08/10 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
数学系毕业生的自我评价
2014/01/10 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
办理信用卡工作证明
2014/09/30 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
消费者理赔投诉书
2015/07/02 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
讲解Python实例练习逆序输出字符串
2022/05/06 Python