JS实现放烟花效果


Posted in Javascript onMarch 10, 2020

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

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>放烟花——欣欣博客</title>
 <style>
 html,body{overflow:hidden;}
 body,div,p{margin:0;padding:0;}
 body{background:#000;font:12px/1.5 arial;color:#7A7A7A;}
 .fire {
 width: 3px;
 height: 30px;
 background: white;
 position: absolute;
 } 
 .spark {
 position: absolute;
 width: 6px;
 height: 6px;
 }
 </style>
 <script src="move.js"></script>
 <script>
 οnlοad=function(){
 document.οnclick=function(e){
  e =e||event;
  var coord ={
  x:e.clientX,
  y:e.clientY
  };
  new Fire(coord).init().launch();
 }
 
 function Fire(coord){
  var self = this;
  //初始化
  this.init=function(){
  this.ball = document.createElement("div");
  this.ball.className="fire";
  this.ball.style.left = coord.x+"px";
  this.ball.style.top= window.innerHeight +"px";
  document.body.appendChild(this.ball);
  return this;
  }
  //发射
  this.launch=function(){
  
  animate(this.ball,{left:coord.x,top:coord.y,height:3},{callback:function(){
  self.explode();
  }});  
  return this;
  }
  //爆炸
  this.explode=function(){
  this.destory();
  var count = randomInt(30,50);
  for(var i =0;i<count;i++){
  new Spark(coord).init().parabola();
  }
  }
  //销毁
  this.destory = function(){
  this.ball.remove();
  }
 }
 function Spark(coord){
  var self = this;
  this.init=function(){
  this.box = document.createElement("div");
  this.box.className="spark";
  this.box.style.backgroundColor="#"+randomColor();
  console.log(this.box.style.backgroundColor)
  this.box.style.left = coord.x+"px";
  this.box.style.top = coord.y+"px";
  this.box.speedX = randomInt(-20,20);
  this.box.speedY = randomInt(-20,10);
  document.body.appendChild(this.box);
  return this;
  }
  this.parabola=function(){
  
  this.timer =setInterval(function(){
  if(self.box.offsetTop >window.innerHeight){
  clearInterval(self.timer);
  self.destroy();
  return;
  }
  self.box.style.left = self.box.offsetLeft + self.box.speedX +"px";
  self.box.style.top = self.box.offsetTop +self.box.speedY++ +"px";
  
  },30)
  
  }
  this.destory=function(){
  this.box.remove();
  }
  
  
 }
 
 //随机整数
 function randomInt(min,max){
  return Math.round(Math.random()*(max-min)+min);
 }
 //随机颜色
 function randomColor(){
  var R = Math.round( Math.random()*255 ).toString(16);
  var G = Math.round( Math.random()*255 ).toString(16);
  var B = Math.round( Math.random()*255 ).toString(16);
  return (R.length<2?"0"+R:R) + (G.length<2?"0"+G:G)+ (B.length<2?"0"+B:B);
 }
 }
 </script>
 </head>
 <body>
 
 </body>
</html>

move.js

/**
 * 
 * @param {Object} obj 目标对象
 * @param {Object} json 要改变的属性
 * @param {Object} extend {buffer,callback} 当buffer为true时为弹性运动
 * callback会在运动结束时,被执行
 * animate(obj, {top:500, left: 300}, {callback:function(){}, buffer: true})
 */
function animate(obj, json, extend){
 extend = extend || {};
 if(obj.isMoving){
 return;
 } else {
 stop();
 obj.isMoving = true;
 }
 //obj = Object.assgin(obj,extend);
 obj.buffer = extend.buffer;
 obj.callback = extend.callback;
 obj.timerlist = {};
 //为每一个属性添加一个定时器
 for(var attr in json){
 (function(attr){
 obj.timerlist[attr] = {speed:0};
 obj.timerlist[attr].timer = setInterval(function(){
 //首先得到当前值
 var iNow = 0;
 if(attr == "opacity"){
  iNow = getStyle(obj, attr) * 100; 
 } else {
  iNow = getStyle(obj, attr);
 }
 var speed = obj.timerlist[attr].speed;
 //根据目标值,计算需要的速度
 if(obj.buffer==true){
  speed += (json[attr] - iNow)/5;
  speed *= 0.75;
 } else {
  speed = (json[attr] - iNow)/5;
 }
 //当无限接近目标值时,停止定时器
 if(Math.abs(iNow - json[attr]) < 0.5){
  clearInterval(obj.timerlist[attr].timer);
  delete obj.timerlist[attr];
  if(getObjLength(obj.timerlist)==0){//所有定时器已停止
  stop();
  obj.callback ? obj.callback() : "";
  }
 } else {
  //根据速度,修改当前值
  if(attr == "opacity"){
  obj.style.opacity = (iNow+speed)/100;
  obj.style.filter = 'alpha(opacity=' + parseFloat(iNow+speed) + ')'; 
  } else {
  obj.style[attr] = iNow+speed+"px";
  }
  obj.timerlist[attr].speed = speed;
 }
 }, 30);
 })(attr);
 }
 
 function clearTimer(){
 for(var i in obj.timerlist){
 clearInterval(obj.timerlist[i]);
 }
 }
 function getStyle(obj, attr){
 if(obj.currentStyle){
 return isNaN(parseFloat(obj.currentStyle[attr])) ? obj.style[attr]=0 : parseFloat(obj.currentStyle[attr]);
 } else {
 return isNaN(parseFloat(getComputedStyle(obj, null)[attr])) ? obj.style[attr]=0 : parseFloat(getComputedStyle(obj, null)[attr]);
 }
 }
 function getObjLength(obj){
 var n = 0;
 for(var i in obj){
 n++;
 }
 return n;
 }
 function stop(){
 clearTimer();//清除所有定时器
 obj.isMoving = false;
 }
}

更多JavaScript精彩特效分享给大家:

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

Javascript 相关文章推荐
javascript 短路法代码精简
Aug 20 Javascript
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
js触发onchange事件的方法说明
Mar 08 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
JS实现烟花爆炸效果
Mar 10 #Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 #Javascript
JS实现网页烟花动画效果
Mar 10 #Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 #Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 #Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 #Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 #Javascript
You might like
PHP下对数组进行排序的函数
2010/08/08 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
php上传大文件设置方法
2016/04/14 PHP
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
让python在hadoop上跑起来
2016/01/27 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
python调用其他文件函数或类的示例
2019/07/16 Python
python3.7 的新特性详解
2019/07/25 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
python实现密码强度校验
2020/03/18 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
餐厅经理岗位职责范本
2014/02/17 职场文书
汽车促销活动方案
2014/03/31 职场文书
股权收购意向书
2014/04/01 职场文书
运动会入场口号
2014/06/07 职场文书
法制教育演讲稿
2014/09/10 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
Python自动化爬取天眼查数据的实现
2021/06/15 Python
python playwright 自动等待和断言详解
2021/11/27 Python
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers