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 相关文章推荐
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 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
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
js实现选项卡效果
2020/03/07 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
Python下线程之间的共享和释放示例
2015/05/04 Python
python中私有函数调用方法解密
2016/04/29 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
英语系毕业生自荐信
2013/10/31 职场文书
信息技术教学反思
2014/02/12 职场文书
财务总经理岗位职责
2014/02/16 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers