JS实现放烟花效果

本文实例为大家分享了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仿QQ特效汇总

JavaScript时钟特效汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript实现的简单烟花特效代码

    JavaScript实现的简单烟花特效代码

    本文实例讲述了JavaScript实现的简单烟花特效代码.分享给大家供大家参考,具体如下: 这是一款JavaScript烟花特效,过年的时候放到你的网页上祝贺大家牛年大吉吧,是不是很不错? 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-yh-explode-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

  • js实现烟花特效

    本文实例为大家分享了js实现烟花特效的具体代码,供大家参考,具体内容如下 1.概述 在网页背景中实现鼠标点击出现模拟烟花爆炸的特效 2.思路 1.获取鼠标点击位置,底端创建烟花节点. 2.为烟花添加css属性,烟花节点从下至上运动. 3.运动至鼠标位置时移除烟花节点,同时生成多个烟花碎片. 4.为不同的烟花碎片随机生成不同的颜色.运动速度.运动方向. 5.烟花碎片超出屏幕显示部分时移除. 3.代码部分 <!DOCTYPE html> <html lang="en"&g

  • JS实现烟花爆炸效果

    本文实例为大家分享了JS实现烟花爆炸的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%;

  • JS实现网页烟花动画效果

    原生js实现放烟花效果,点击鼠标,然后向四周扩散,最后自由落体效果!最简单的方法实现! 效果图: CSS代码: *{ padding: 0px; margin: 0px; background: #000; } .firworks{ width: 6px; height: 6px; position: absolute; } js代码: <script type="text/javascript"> //封装一个颜色随机的效果 function randomColor(){

  • javascript实现网页背景烟花效果的方法

    javascript实现网页背景烟花效果的方法

    本文实例讲述了javascript实现网页背景烟花效果的方法.分享给大家供大家参考.具体如下: 这里的网页背景烟花爆炸特效,不用说是用Js实现的,配合黑色背景效果最好,五颜六色的烟花效果,四散的烟花效果,以前发过一些网页上的烟花特效,本款类似,但代码更简洁. 运行效果如下图所示: 具体代码如下: <html> <head> <title>背景的烟花效果</title> <style type="text/css"> <!

  • 用p5.js制作烟花特效的示例代码

    用p5.js制作烟花特效的示例代码

    前言 之前看过一篇文章,使用processing制作烟花特效.效果如下 fireworks 网上调查了一圈了,发现processing是一个互动编程软件,java语言发展而来.而且动画效果是跑在processing专门的模拟器上. 不过好在也有对应的web扩展语言,有processing.js和p5.js. processing.js在github上已经好几年没有人维护了,一些processing的特性支持不了.为此踩了不少坑, 本文就集中讲解如何用p5.js写烟花特效. 代码讲解 proces

  • js模拟实现烟花特效

    本文实例为大家分享了js实现烟花特效的具体代码,供大家参考,具体内容如下 如下图 首先描绘圆周运动 // d1 /*css*/ div{ height: 4px; width: 4px; background: red; position: absolute; } //js var div = document.getElementById('div'); // 画运动点 document.getElementsByTagName('body')[0].appendChild(tdiv); //

  • 原生JS实现烟花效果

    原生JS实现烟花效果,点击页面生成烟花,向四周扩散,然后再坠落下去.(这里的烟花我是用的特殊字符爱心形状) 基础css代码 /* 设置基础的css样式 */ body{background: #000;overflow: hidden;} .fire{position: absolute;width: 4px;height: 30px;} js代码: 1.给页面添加点击事件,生成主体烟花 //给页面设置点击事件 document.onclick = function(eve){ var e =

  • javascript实现超好看的3D烟花特效

    javascript实现超好看的3D烟花特效

    本文实例为大家分享了超好看3D烟花的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>3D烟花</title> <style> html,body{ margin:0px; width:100%; height:100%; overflow:hidden; background:#000; } #c

  • 新年快乐! javascript实现超级炫酷的3D烟花特效

    本文实例为大家分享了javascript实现3D烟花特效的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta charset="utf-8"> <title>3D烟花</title> <style> html,b

随机推荐