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 获取字符串字节数的多种方法
Jun 02 Javascript
javascript appendChild,innerHTML,join性能比较代码
Aug 29 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
js 手机号码合法性验证代码集合
Sep 29 Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
JS删除数组指定值常用方法详解
Jun 04 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实现多图片上传类实例
2014/07/26 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
django如何通过类视图使用装饰器
2019/07/24 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
应届大学生求职信
2013/12/01 职场文书
求职信范文怎么写
2014/01/29 职场文书
博士生专家推荐信
2014/09/26 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
先进班组材料范文
2014/12/25 职场文书
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB