今天制作了一個網頁煙花效果。
下面是制作思路和基本代碼。
手動釋放煙花:
1)煙花從底部往上飛入
2)煙火飛到目標位置後產生爆炸效果
3)爆炸效果產生多個炮灰
4)炮灰往四周擴散
5)炮灰飛出屏幕後消失
自動煙花:
設置定時器讓其定時釋放。
查看效果<html> <head> <titlt><網頁煙花效果/title> <meta charset = "utf-8" /> </head> <body> <div id="tips"> <a id="auto" href="javascript:;" class="">自動放煙花</a> </div> </body> </html>
<style type="text/css"> html,body{overflow:hidden;height:100%;} body,div,p{margin:0;padding:0;} body{background:#000;font:12px/1.5 arial;color:#7A7A7A;} a{text-decoration:none;outline:none;} #tips,#copyright{position:absolute;width:100%;height:50px;text-align:center;background:#171717;border:2px solid #484848;} #tips{top:0;border-width:0 0 2px;} #tips a{font:14px/30px arial;color:#FFF;background:#F06;display:inline-block;margin:10px 5px 0;padding:0 15px;border-radius:15px;} #tips a.active{background:#FE0000;} #copyright{bottom:0;line-height:50px;border-width:2px 0 0;} #copyright a{color:#FFF;background:#7A7A7A;padding:2px 5px;border-radius:10px;} #copyright a:hover{background:#F90;} p{position:absolute;top:55px;width:100%;text-align:center;} .fire { width: 3px; height: 30px; background: white; position: absolute;top:100%; } .spark { position: absolute; width: 3px; height: 3px; } </style>
<script src="../common.js"></script> <script> window.onload = function(){ var win = document.documentElement; document.onclick = function(e){ e = e || window.event; fire({x:e.clientX,y:e.clientY}); } // 自動放煙花 var timer; $('#auto').onclick = function(e){ e = e || window.event; // 阻止冒泡 e.stopPropagation(); this.autoFire = !this.autoFire; if(!this.autoFire) { clearInterval(timer); this.innerHTML = this.innerHTML.replace('(激活)',''); return; } this.innerHTML += '(激活)'; timer = setInterval(function(){ var x = getRandomNum(10,win.offsetWidth-10); var y = getRandomNum(100,win.offsetHeight-100); fire({x:x,y:y}); },2000); } // 煙花飛入函數 function fire(coord){ // 生成煙花 var fireworks = document.createElement('div'); fireworks.className = 'fire'; fireworks.style.left = coord.x + 'px'; document.body.appendChild(fireworks); // 煙花飛入點擊位置,並改變煙花高度 animate(fireworks,{top:coord.y,height:3},function(){ //煙花飛入動畫結束後 // 清除煙花元素 document.body.removeChild(fireworks); // 爆炸效果 bomb({x:coord.x,y:coord.y}); }); } // 爆炸效果函數 function bomb(coord){ var num = 50; for(var i=0;i<num;i++){ var _s = new Spark(coord) _s.init(); } } function Spark(coord){ // 初始化火花 this.init = function(){ var _spark = document.createElement('div'); _spark.className = 'spark'; _spark.style.backgroundColor = getRandomColor(); _spark.style.top = coord.y + 'px'; _spark.style.left = coord.x + 'px'; document.body.appendChild(_spark); // 保存火花到this this.spark = _spark; var xSpeed = getRandomNum(-20,20); var ySpeed = getRandomNum(-20,20); this.move(xSpeed,ySpeed); } } // 火花運動 Spark.prototype.move = function(xSpeed,ySpeed){ var self = this; var _spark = this.spark; this.timer = setInterval(function(){ _spark.style.top = _spark.offsetTop + ySpeed++ + 'px'; _spark.style.left = _spark.offsetLeft + xSpeed + 'px'; // 火花超出屏幕後,清除定時器,並清對應除頁面元素 if(_spark.offsetTop<0 || _spark.offsetTop > win.offsetHeight || _spark.offsetLeft < 0 || _spark.offsetLeft > win.offsetWidth){ clearInterval(self.timer); document.body.removeChild(_spark); } },20); } } </script>
上面的js代碼中我導入了自己封裝外部js文件
一個是獲取隨機顏色,一個是獲取隨機數,另外還有一個是選擇器。
你們測試的時候可以復制進去都只有幾句下面是其代碼:
function $(selector){
if(document.querySelectorAll){
var list = document.querySelectorAll(selector);
// 如果得到的列表只有一個,則直接返回element元素節點
return list.length==1 ? list[0] : list;
}else{
// 判斷selector是否為id
if(/^#document.querySelector\w+/.test(selector)){
return document.getElementById(selector.substring(1));
}
// selector是否為類選擇器
else if(/^\.\w+/.test(selector)){
return document.getElementsByClassName(selector.substring(1));
}else{
return document.getElementsByTagName(selector);
}
}
}
function getRandomNum(min,max){ return parseInt(Math.random()*(max-min + 1)) + min; } /* 獲取隨機顏色 */ function getRandomColor(){ return 'rgb('+ getRandomNum(0,255) + ','+ getRandomNum(0,255) + ','+ getRandomNum(0,255) + ')'; }