您的位置：首页 > Web前端 > JavaScript

js 网页烟花效果

2016-03-23 22:19 447 查看
今天制作了一个网页烟花效果。



下面是制作思路和基本代码。

手动释放烟花：

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) + ')';
}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航