js实现烟花特效

2023-07-29 22:35:04 76

本文实例为大家分享了js实现烟花特效的具体代码，供大家参考，具体内容如下

1.概述

在网页背景中实现鼠标点击出现模拟烟花爆炸的特效

2.思路

1.获取鼠标点击位置，底端创建烟花节点。
2.为烟花添加css属性，烟花节点从下至上运动。
3.运动至鼠标位置时移除烟花节点，同时生成多个烟花碎片。
4.为不同的烟花碎片随机生成不同的颜色、运动速度、运动方向。
5.烟花碎片超出屏幕显示部分时移除。

3.代码部分







Document

4.Move.js

functiongetStyle(obj,attr){
if(window.getComputedStyle){
returnwindow.getComputedStyle(obj)[attr];
}else{
returnobj.currentStyle[attr];
}
}
functionbufferMove(obj,json,fn){
letspeed=0;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
varflag=true;
for(varattrinjson){
varcurrentValue=null;
if(attr==='opacity'){
currentValue=Math.round(getStyle(obj,attr)*100);
}else{
currentValue=parseInt(getStyle(obj,attr));
}
speed=(json[attr]-currentValue)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(currentValue!==json[attr]){
if(attr==='opacity'){
obj.style.opacity=(currentValue+speed)/100;
obj.style.filter='alpha(opacity='+(currentValue+speed)+')';//IE
}else{
obj.style[attr]=currentValue+speed+'px';
}
flag=false;
}
}
if(flag){
clearInterval(obj.timer);
fn&&typeoffn==='function'&&fn();
}
},10);
}

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

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

js实现烟花特效

热门推荐

随机推荐