java的放烟花_JS实现放烟花效果

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

放烟花——欣欣博客

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;

}

ο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

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);

}

}

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精彩特效分享给大家：

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