好资源导航 » 文章资讯 » JS实现网页烟花动画效果

JS实现网页烟花动画效果

2023-07-29 13:10:03 245

原生js实现放烟花效果，点击鼠标，然后向四周扩散，最后自由落体效果！最简单的方法实现！

效果图：

CSS代码：

*{
padding:0px;
margin:0px;
background:#000;
}
.firworks{
width:6px;
height:6px;
position:absolute;
}

js代码：


//封装一个颜色随机的效果
functionrandomColor(){
varcolor="rgb("
varr=parseInt(Math.random()*256);
varg=parseInt(Math.random()*256);
varb=parseInt(Math.random()*256);
color=color+r+","+g+","+b+")";
returncolor;
}
//创建一个制造烟花的构造函数，第一个参数为元素，第二参数为初始x轴位置，第三参数为y轴位置。
functionFireworks(Div,x,y){
Div.style.backgroundColor=randomColor();//给烟花添加背景色
Div.className="firworks";//添加一个class
document.body.appendChild(Div);
Div.style.left=x+"px";//把鼠标点击坐标给div
Div.style.top=y+"px";
varspeedX=(parseInt(Math.random()*2)==0?1:-1)*parseInt(Math.random()*16+1);//三目运算符随机移动方向，概率50%,为1时往正方向移动，负1时往反方向移动第二个随机数随机速度快慢
varspeedY=(parseInt(Math.random()*2)==0?1:-1)*parseInt(Math.random()*20+1);
this.move=function(){
vari=3;
vartime1=setInterval(function(){
i++;
Div.style.left=Div.offsetLeft+speedX+"px";
Div.style.top=Div.offsetTop+speedY+i+"px";//当i+speedY>0时,烟花朝下运动。
if(Div.offsetLeft+Div.offsetWidth>window.innerWidth||Div.offsetLeft<2||Div.offsetTop+Div.offsetHeight>window.innerHeight||Div.offsetTop<2){
Div.remove();//移动出可视区域记得删除div和清除定时器
clearInterval(time1);
}
},30);
}
}
document.οnclick=function(e){
varevt=e||window.event;//兼容性处理
for(vari=0;i<80;i++){//随机烟花的数量
vardiv=document.createElement("div");
varb=newFireworks(div,evt.pageX,evt.pageY);
b.move();
}
}

更多JavaScript精彩特效分享给大家：

Javascript菜单特效大全

javascript仿QQ特效汇总

JavaScript时钟特效汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

JS实现网页烟花动画效果

热门推荐

随机推荐