JS 烟花效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Author" content="aoliann">
<title>un</title>
<style type="text/css">
*{margin:0;padding:0;}
body{
    background: #000;
    overflow: hidden;
}
a{text-decoration: none;color:black;}
li{list-style:none;}
.firework{
    position: absolute;
    width:10px;
    height:50px;
    background:lightgreen;
    border-radius: 50%;
}
.fires{
    position: absolute;
    width:8px;
    height: 8px;
    background: purple;
    border-radius: 50%;
}
</style>
</head>
<body>
<script type="text/javascript">
var timer = null;
//生成子弹节点
document.onclick = function(e){

var e = e || window.event; //兼容低版本IE
var x = e.clientX,        //获取X坐标
    y = e.clientY,       //获取Y坐标
    h = window.innerHeight;   //获取浏览器高度
   firework(x,y,h);          //把当前鼠标点击的坐标当做形参
};
//让子弹到达鼠标点击的位置
function firework(x,y,h){

var oDiv = document.createElement('div'); // 创建一个div节点
oDiv.className = 'firework';  //给创建的div添加类名
oDiv.style.left = x + 'px';
oDiv.style.top = h + 'px';
oDiv.style.backgroundColor = color();
document.body.appendChild(oDiv); //把创建的div节点添加到body中
var speed =10; //自定义的速度
timer = setInterval(function(){
 oDiv.style.top = oDiv.offsetTop -speed +'px'; // 每30毫秒在原基础的位置向上减去10

 if(oDiv.offsetTop <= y){   //判断子弹是否到达点击的位置
    clearInterval(timer);  //如果到达了鼠标点击的位置清除定时器 让子弹不再运动
    document.body.removeChild(oDiv); //删除这个子弹节点


    createFires(x,y,h);
 }

},30)
}
//生成烟花
function createFires(x,y,h){

var n = Math.ceil(Math.random()*50) + 50; // 生成随机烟花粒子数范围(50-100)
var fires = [];//自定义数组用于存储生成随机的烟花粒子
for(var i=0;i<n;i++){
    fires[i] = document.createElement('div');
    fires[i].className ='fires';
    fires[i].style.left = x + 'px';
    fires[i].style.top =  y + 'px';
    fires[i].style.backgroundColor = color();
    fires[i].speedX = Math.random() * 19 -9 ;
    fires[i].speedY = Math.random() * 20 -8 ;
    document.body.appendChild(fires[i]);
}
     setInterval(function(){
      for(var i=0;i<n;i++){
            fires[i].style.left = fires[i].offsetLeft + fires[i].speedX + 'px';
            fires[i].style.top =  fires[i].offsetTop + fires[i].speedY + 'px';
            fires[i].speedY += 0.6;

            if(fires[i].offsetLeft < 0 || fires[i].offsetLeft > window.innerWidth || fires[i].offsetTop > h)
            {
            document.body.removeChild(fires[i]);
            }
        }
    },30)
}
//生成随机颜色
function color(){
    var r = Math.floor(Math.random()*256);
    var g = Math.floor(Math.random()*256);
    var b = Math.floor(Math.random()*256);

   return "rgb("+r+","+g+","+b+")"

}
</script>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » JS 烟花效果

赞 (0)
分享到:更多 ()

发表评论 0