原生JS實(shí)現(xiàn)螢火蟲(chóng)效果
本文實(shí)例為大家分享了JS實(shí)現(xiàn)螢火蟲(chóng)效果的具體代碼,供大家參考,具體內(nèi)容如下
上代碼之前,先看一下效果:
CSS部分(此處用元素模擬螢火蟲(chóng),背景可自行設(shè)置):
<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è)螢火蟲(chóng)的寬高 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){ // 開(kāi)始運(yùn)動(dòng)之前,還得隨機(jī)生成目標(biāo) this.randomPos(); // 開(kāi)始運(yùn)動(dòng) move(ele,{ left:this.x, top:this.y },()=>{ // 一個(gè)動(dòng)畫(huà)結(jié)束后,重復(fù)開(kāi)啟當(dāng)前動(dòng)畫(huà),即可 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]; } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
純JS實(shí)現(xiàn)動(dòng)態(tài)時(shí)間顯示代碼
本篇文章主要是對(duì)純JS實(shí)現(xiàn)動(dòng)態(tài)時(shí)間顯示的代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02BootStrap智能表單實(shí)戰(zhàn)系列(七)驗(yàn)證的支持
這篇文章主要介紹了BootStrap智能表單實(shí)戰(zhàn)系列(七)驗(yàn)證的支持 ,凡是涉及到用戶(hù)編輯信息然后保存的頁(yè)面,都涉及到一個(gè)數(shù)據(jù)是否符合要求的檢查,需要客服端和服務(wù)器端的校驗(yàn)的問(wèn)題,本文介紹非常詳細(xì),具有參考價(jià)值,需要的朋友可以參考下2016-06-06JS新標(biāo)簽頁(yè)打開(kāi)的方法大全(讓你的網(wǎng)站訪問(wèn)更加便捷)
在開(kāi)發(fā)Web應(yīng)用中我們常常需要在當(dāng)前頁(yè)面打開(kāi)一個(gè)鏈接,但又不希望離開(kāi)當(dāng)前頁(yè)面,這篇文章主要給大家介紹了關(guān)于JS新標(biāo)簽頁(yè)打開(kāi)的方法大全,通過(guò)這些方法可以讓你的網(wǎng)站訪問(wèn)更加便捷,需要的朋友可以參考下2023-10-10一次微信小程序內(nèi)地圖的使用實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于一次微信小程序內(nèi)地圖使用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09詳解js中構(gòu)造流程圖的核心技術(shù)JsPlumb(2)
這篇文章主要介紹了js中構(gòu)造流程圖的核心技術(shù)JsPlumb,jsPlumb是一個(gè)強(qiáng)大的JavaScript連線庫(kù),它可以將html中的元素用箭頭、曲線、直線等連接起來(lái),適用于開(kāi)發(fā)Web上的圖表、建模工具等,需要的朋友可以參考下2015-12-12JS實(shí)現(xiàn)燈泡開(kāi)關(guān)特效
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)燈泡開(kāi)關(guān)特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10javascript實(shí)現(xiàn)秒表計(jì)時(shí)器的制作方法
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)秒表計(jì)時(shí)器的制作方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02如何正確使用javascript 來(lái)進(jìn)行我們的程序開(kāi)發(fā)
Javascript 正確使用方法,下面為大家介紹的是一個(gè)關(guān)于如何正確使用javascript 來(lái)進(jìn)行我們的程序開(kāi)發(fā),需要的朋友可以參考下2014-06-06