JS實(shí)現(xiàn)放煙花效果
本文實(shí)例為大家分享了JS實(shí)現(xiàn)放煙花效果的具體代碼，供大家參考，具體內(nèi)容如下
<!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='http://www.gepszalag.com/bcjs/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; } //發(fā)射 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(); } } //隨機(jī)整數(shù) function randomInt(min,max){ return Math.round(Math.random()*(max-min)+min); } //隨機(jī)顏色 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 目標(biāo)對(duì)象 * @param {Object} json 要改變的屬性 * @param {Object} extend {buffer,callback} 當(dāng)buffer為true時(shí)為彈性運(yùn)動(dòng) * callback會(huì)在運(yùn)動(dòng)結(jié)束時(shí)，被執(zhí)行 * 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 = {}; //為每一個(gè)屬性添加一個(gè)定時(shí)器 for(var attr in json){ (function(attr){ obj.timerlist[attr] = {speed:0}; obj.timerlist[attr].timer = setInterval(function(){ //首先得到當(dāng)前值 var iNow = 0; if(attr == 'opacity'){ iNow = getStyle(obj, attr) * 100; } else { iNow = getStyle(obj, attr); } var speed = obj.timerlist[attr].speed; //根據(jù)目標(biāo)值，計(jì)算需要的速度 if(obj.buffer==true){ speed += (json[attr] - iNow)/5; speed *= 0.75; } else { speed = (json[attr] - iNow)/5; } //當(dāng)無(wú)限接近目標(biāo)值時(shí)，停止定時(shí)器 if(Math.abs(iNow - json[attr]) < 0.5){ clearInterval(obj.timerlist[attr].timer); delete obj.timerlist[attr]; if(getObjLength(obj.timerlist)==0){//所有定時(shí)器已停止 stop(); obj.callback ? obj.callback() : ''; } } else { //根據(jù)速度，修改當(dāng)前值 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();//清除所有定時(shí)器 obj.isMoving = false; }}
更多JavaScript精彩特效分享給大家：
Javascript菜單特效大全
javascript仿QQ特效匯總
JavaScript時(shí)鐘特效匯總
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 詳解CSS不受控制的position fixed2. ie6,ie7,ie8完美支持position:fixed的終極解決方案3. XML中顯示HTML的小技巧4. 詳解如何使用Net將HTML簡(jiǎn)歷導(dǎo)出為PDF格式5. 前端html+css實(shí)現(xiàn)動(dòng)態(tài)生日快樂(lè)代碼6. Properties 持久的屬性集的實(shí)例詳解7. html清除浮動(dòng)的6種方法示例8. asp+JMAIL實(shí)現(xiàn)發(fā)送郵件9. jsp文件下載功能實(shí)現(xiàn)代碼10. CSS linear-gradient屬性案例詳解
網(wǎng)公網(wǎng)安備