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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
vue实现固定位置显示功能
May 30 Javascript
javascrpt密码强度校验函数详解
Mar 18 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
微信小程序实现选项卡滑动切换
Oct 22 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发送邮件类代码附详细说明
2008/07/10 PHP
php发送邮件的问题详解
2015/06/22 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
javascript 闭包详解
2015/07/02 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
Python 处理数据的实例详解
2017/08/10 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
python基础教程之while循环
2019/08/14 Python
Python实现代码统计工具
2019/09/19 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
治超工作实施方案
2014/05/04 职场文书
主题团日活动总结
2014/06/25 职场文书
车间核算员岗位职责
2014/07/01 职场文书
2014年安全生产责任书
2014/07/22 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
同学聚会通知书
2015/04/20 职场文书
高三教师工作总结2015
2015/07/21 职场文书
多人股份制合作协议书
2016/03/19 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
导游词之峨眉山
2019/12/16 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
Python进度条的使用
2021/05/17 Python
教你怎么用python selenium实现自动化测试
2021/05/27 Python