使用JavaScript怎么實(shí)現(xiàn)一個(gè)螢火蟲效果？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

創(chuàng)新互聯(lián)是專業(yè)的尼木網(wǎng)站建設(shè)公司，尼木接單;提供成都網(wǎng)站建設(shè)、成都做網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行尼木網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

CSS部分：

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

JS部分：

<script>
class Glowworm{
 constructor(){
 // 獲取屏幕的可視區(qū)域的寬高，用作將來(lái)的隨機(jī)范圍
 this.clientW = document.documentElement.clientWidth;
 this.clientH = document.documentElement.clientHeight;
 // 假設(shè)螢火蟲的寬高
 this.w = 20;
 this.h = 20;
 }
 createEle(){
 var div = document.createElement("div");
 div.className = "box";
 document.body.appendChild(div);
 // 在創(chuàng)建元素之前一定得先生成隨機(jī)坐標(biāo)
 div.style.left = this.x + "px";
 div.style.top = this.y + "px";
 // 元素創(chuàng)建好之后，立即運(yùn)動(dòng)
 this.move(div);
 }
 randomPos(){
 // 隨機(jī)生成坐標(biāo)
 this.x = random(0,this.clientW - this.w);
 this.y = random(0,this.clientH - this.h);
 }
 move(ele){
 // 開始運(yùn)動(dòng)之前，還得隨機(jī)生成目標(biāo)
 this.randomPos();
 // 開始運(yùn)動(dòng)
 move(ele,{
  left:this.x,
  top:this.y
 },()=>{
  // 一個(gè)動(dòng)畫結(jié)束后，重復(fù)開啟當(dāng)前動(dòng)畫，即可
  this.move(ele);
 })
 }
}

for(var i=0;i<60;i++){
 // 先得到實(shí)例
 var g = new Glowworm();
 // 生成隨機(jī)坐標(biāo)
 g.randomPos();
 // 再創(chuàng)建元素
 g.createEle();
}

function random(a,b){
 return Math.round(Math.random()*(a-b)+b);
}
</script>

最后需要引入一個(gè)運(yùn)動(dòng)函數(shù)：
原生JS封裝：帶有px的css屬性、透明度、且可以運(yùn)動(dòng)的函數(shù)。

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);
  // 只要有一個(gè)屬性沒(méi)到目標(biāo)：絕對(duì)不能清除計(jì)時(shí)器
  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];
 }
}

看完上述內(nèi)容，你們掌握使用JavaScript怎么實(shí)現(xiàn)一個(gè)螢火蟲效果的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當(dāng)前題目：使用JavaScript怎么實(shí)現(xiàn)一個(gè)螢火蟲效果-創(chuàng)新互聯(lián)
標(biāo)題URL：http://chinadenli.net/article4/hpoie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、虛擬主機(jī)、響應(yīng)式網(wǎng)站、全網(wǎng)營(yíng)銷推廣、關(guān)鍵詞優(yōu)化、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)