js实现烟花特效


Posted in Javascript onMarch 02, 2020

本文实例为大家分享了js实现烟花特效的具体代码,供大家参考,具体内容如下

1.概述

在网页背景中实现鼠标点击出现模拟烟花爆炸的特效

2.思路

1.获取鼠标点击位置,底端创建烟花节点。
2.为烟花添加css属性,烟花节点从下至上运动。
3.运动至鼠标位置时移除烟花节点,同时生成多个烟花碎片。
4.为不同的烟花碎片随机生成不同的颜色、运动速度、运动方向。
5.烟花碎片超出屏幕显示部分时移除。

3.代码部分

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 * {
  padding: 0;
  margin: 0;
 }
 
 html,
 body {
  width: 100%;
  height: 100%;
  background-color: black;
  overflow: hidden;
 }
 </style>
</head>
 
<body>
 <script src="move.js"></script>
 <script>
 
 class Firework {
  constructor(x, y) {//x,y鼠标的位置
  this.x = x;//将水平位置赋值给this.x属性。
  this.y = y;//将垂直位置赋值给this.y属性。
  this.ch = document.documentElement.clientHeight;//可视区的高度
  }
  init() {
  //1.创建烟花节点。
  this.firebox = document.createElement('div');
  this.firebox.style.cssText = `width:5px;height:5px;background:#fff;position:absolute;left:${this.x}px;top:${this.ch}px;`;
  document.body.appendChild(this.firebox);
  this.firemove();//创建完成,直接运动。
  }
  //2.烟花节点运动
  firemove() {
  bufferMove(this.firebox, { top: this.y }, () => {
   document.body.removeChild(this.firebox);
   //当烟花节点消失的时候,创建烟花碎片
   this.createfires()
  });
  }
  //3.当前鼠标点击的位置,随机产生30-60个盒子。(随机颜色)
  createfires() {
  for (let i = 1; i <= this.rannum(30, 60); i++) {
   this.fires = document.createElement('div');
   this.fires.style.cssText = `width:5px;height:5px;background:rgb(${this.rannum(0, 255)},${this.rannum(0, 255)},${this.rannum(0, 255)});position:absolute;left:${this.x}px;top:${this.y}px;`;
   document.body.appendChild(this.fires);
   this.fireboom(this.fires);//设计成一个一个运动,等到循环结束,出现整体结果。
  }
  }
  //4.烟花碎片运动。
  fireboom(obj) {
  //存储当前obj的初始值。
  let initx = this.x;
  let inity = this.y;
 
  //随机产生速度(水平和垂直方向都是随机的,符号也是随机的)。
  let speedx = parseInt((Math.random() > 0.5 ? '-' : '') + this.rannum(1, 15));
  let speedy = parseInt((Math.random() > 0.5 ? '-' : '') + this.rannum(1, 15));
 
  obj.timer = setInterval(() => {
   initx += speedx;
   inity += speedy++; //模拟重力加速度(垂直方向比水平方向快一些)
   if (inity >= this.ch) {
   document.body.removeChild(obj);
   clearInterval(obj.timer);
   }
   obj.style.left = initx + 'px';
   obj.style.top = inity + 'px';
  }, 1000 / 60);
 
  }
  //随机区间数
  rannum(min, max) {
  return Math.round(Math.random() * (max - min) + min);
  }
 }
 
 
 document.onclick = function (ev) {
  var ev = ev || window.event;
  //ev.clientX,ev.clientY//获取的鼠标的位置
  new Firework(ev.clientX, ev.clientY).init();
 }
 </script>
</body>
 
</html>

4.Move.js

function getStyle(obj, attr) {
 if (window.getComputedStyle) {
 return window.getComputedStyle(obj)[attr];
 } else {
 return obj.currentStyle[attr];
 }
}
function bufferMove(obj, json, fn) {
 let speed = 0;
 clearInterval(obj.timer);
 obj.timer = setInterval(function () {
 var flag = true;
 for (var attr in json) {
  var currentValue = null;
  if (attr === 'opacity') {
  currentValue = Math.round(getStyle(obj, attr) * 100);
  } else {
  currentValue = parseInt(getStyle(obj, attr));
  }
  speed = (json[attr] - currentValue) / 10;
  speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 
  if (currentValue !== json[attr]) {
  if (attr === 'opacity') {
   obj.style.opacity = (currentValue + speed) / 100;
   obj.style.filter = 'alpha(opacity=' + (currentValue + speed) + ')';//IE
  } else {
   obj.style[attr] = currentValue + speed + 'px';
  }
  flag = false;
  }
 }
 if (flag) {
  clearInterval(obj.timer);
  fn && typeof fn === 'function' && fn();
 }
 }, 10);
}

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

Javascript 相关文章推荐
JS对HTML标签select的获取、添加、删除操作
Oct 17 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
jQuery动态生成不规则表格(前后端)
Feb 21 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 #Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 #Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 #Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 #Javascript
Vue Router的手写实现方法实现
Mar 02 #Javascript
ES6中Set和Map用法实例详解
Mar 02 #Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 #Javascript
You might like
PHP实现链式操作的三种方法详解
2017/11/16 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
document.createElement()用法
2013/03/13 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
Python随机数random模块使用指南
2016/09/09 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
python处理按钮消息的实例详解
2017/07/11 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
Python的缺点和劣势分析
2019/11/19 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
Python使用Matlab命令过程解析
2020/06/04 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
求职信的要素有哪些呢
2013/12/26 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
环保倡议书100字
2014/05/15 职场文书
团队精神口号
2014/06/06 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL