原生JS实现萤火虫效果

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

上代码之前，先看一下效果：

CSS部分（此处用元素模拟萤火虫，背景可自行设置）：

 .box{width: 4px;height: 5px;background: wheat;position: absolute;border-radius: 50%;}
 body{background: url(../img/bg.jpg) ;}

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];
 }
}

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