原生JS实现萤火虫效果
本文实例为大家分享了JS实现萤火虫效果的具体代码，供大家参考，具体内容如下
上代码之前，先看一下效果：
CSS部分（此处用元素模拟萤火虫，背景可自行设置）：
JS部分：
最后需要引入一个运动函数：
原生JS封装：带有px的css属性、透明度、且可以运动的函数。
functionmove(ele,obj,cb){
clearInterval(ele.t);
ele.t=setInterval(()=>{
vari=true;
for(varattrinobj){
if(attr=="opacity"){
variNow=getStyle(ele,attr)*100;
}else{
variNow=parseInt(getStyle(ele,attr));
}
letspeed=(obj[attr]-iNow)/10;
speed=speed<0?Math.floor(speed):Math.ceil(speed);
//只要有一个属性没到目标：绝对不能清除计时器
if(iNow!==obj[attr]){
i=false;
}
if(attr=="opacity"){
ele.style.opacity=(iNow+speed)/100;
}else{
ele.style[attr]=iNow+speed+"px";
}
}
if(i){
clearInterval(ele.t);
if(cb){
cb();
}
//cb&&cb();
}
},30);
}
functiongetStyle(ele,attr){
if(ele.currentStyle){
returnele.currentStyle[attr];
}else{
returngetComputedStyle(ele,false)[attr];
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。