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 正则
Dec 06 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
phpBB BBcode处理的漏洞
2006/10/09 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
PHP中soap的用法实例
2014/10/24 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
类似CSDN图片切换效果脚本
2009/09/17 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
Python tkinter三种布局实例详解
2020/01/06 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
喝酒检查书范文
2014/02/23 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
初中语文教学随笔
2015/08/15 职场文书