大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
使用JavaScript怎么实现一个萤火虫效果?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
我们提供的服务有:做网站、成都网站制作、微信公众号开发、网站优化、网站认证、尼金平ssl等。为上1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的尼金平网站制作公司
CSS部分:
JS部分:
最后需要引入一个运动函数:
原生JS封装:带有px的css属性、透明度、且可以运动的函数。
function move(ele,obj,cb){ clearInterval(ele.t); ele.t = setInterval(() => { var i = true; for(var attr in obj){ if(attr == "opacity"){ var iNow = getStyle(ele,attr) * 100; }else{ var iNow = parseInt(getStyle(ele,attr)); } let speed = (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); } function getStyle(ele,attr){ if(ele.currentStyle){ return ele.currentStyle[attr]; }else{ return getComputedStyle(ele,false)[attr]; } }
看完上述内容,你们掌握使用JavaScript怎么实现一个萤火虫效果的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!