今天制作了一个网页烟花效果。
下面是制作思路和基本代码。
手动释放烟花：
1）烟花从底部往上飞入
2）烟火飞到目标位置后产生爆炸效果
3）爆炸效果产生多个炮灰
4）炮灰往四周扩散
5）炮灰飞出屏幕后消失
自动烟花：
设置定时器让其定时释放。
1 <html> 2 <head> 3 <titlt><网页烟花效果/title> 4 <meta charset = "utf-8" /> 5 </head> 6 <body> 7 <div id="tips"> 8 <a id="auto" href="javascript:;" class="">自动放烟花</a> 9 </div> 10 </body> 11 </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.querySelectorw+/.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) + ')'; }