微客导航 » 文章资讯 » JS实现放烟花效果

JS实现放烟花效果

2023-07-29 12:37:04 324

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





放烟花——欣欣博客

move.js

/**
*
*@param{Object}obj目标对象
*@param{Object}json要改变的属性
*@param{Object}extend{buffer,callback}当buffer为true时为弹性运动
*callback会在运动结束时，被执行
*animate(obj,{top:500,left:300},{callback:function(){},buffer:true})
*/
functionanimate(obj,json,extend){
extend=extend||{};
if(obj.isMoving){
return;
}else{
stop();
obj.isMoving=true;
}
//obj=Object.assgin(obj,extend);
obj.buffer=extend.buffer;
obj.callback=extend.callback;
obj.timerlist={};
//为每一个属性添加一个定时器
for(varattrinjson){
(function(attr){
obj.timerlist[attr]={speed:0};
obj.timerlist[attr].timer=setInterval(function(){
//首先得到当前值
variNow=0;
if(attr=="opacity"){
iNow=getStyle(obj,attr)*100;
}else{
iNow=getStyle(obj,attr);
}
varspeed=obj.timerlist[attr].speed;
//根据目标值，计算需要的速度
if(obj.buffer==true){
speed+=(json[attr]-iNow)/5;
speed*=0.75;
}else{
speed=(json[attr]-iNow)/5;
}
//当无限接近目标值时，停止定时器
if(Math.abs(iNow-json[attr])<0.5){
clearInterval(obj.timerlist[attr].timer);
deleteobj.timerlist[attr];
if(getObjLength(obj.timerlist)==0){//所有定时器已停止
stop();
obj.callback?obj.callback():"";
}
}else{
//根据速度，修改当前值
if(attr=="opacity"){
obj.style.opacity=(iNow+speed)/100;
obj.style.filter='alpha(opacity='+parseFloat(iNow+speed)+')';
}else{
obj.style[attr]=iNow+speed+"px";
}
obj.timerlist[attr].speed=speed;
}
},30);
})(attr);
}

functionclearTimer(){
for(variinobj.timerlist){
clearInterval(obj.timerlist[i]);
}
}
functiongetStyle(obj,attr){
if(obj.currentStyle){
returnisNaN(parseFloat(obj.currentStyle[attr]))?obj.style[attr]=0:parseFloat(obj.currentStyle[attr]);
}else{
returnisNaN(parseFloat(getComputedStyle(obj,null)[attr]))?obj.style[attr]=0:parseFloat(getComputedStyle(obj,null)[attr]);
}
}
functiongetObjLength(obj){
varn=0;
for(variinobj){
n++;
}
returnn;
}
functionstop(){
clearTimer();//清除所有定时器
obj.isMoving=false;
}
}

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

Javascript菜单特效大全

javascript仿QQ特效汇总

JavaScript时钟特效汇总

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

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

返回顶部
3162201930
czq8825@qq.com

JS实现放烟花效果

热门推荐

随机推荐