原生JS實現螢火蟲效果
阿新 • • 發佈:2020-03-09
本文例項為大家分享了JS實現螢火蟲效果的具體程式碼,供大家參考,具體內容如下
上程式碼之前,先看一下效果:
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(){ // 獲取螢幕的可視區域的寬高,用作將來的隨機範圍 this.clientW = document.documentElement.clientWidth; this.clientH = document.documentElement.clientHeight; // 假設螢火蟲的寬高 this.w = 20; this.h = 20; } createEle(){ var div = document.createElement("div"); div.className = "box"; document.body.appendChild(div); // 在建立元素之前一定得先生成隨機座標 div.style.left = this.x + "px"; div.style.top = this.y + "px"; // 元素建立好之後,立即運動 this.move(div); } randomPos(){ // 隨機生成座標 this.x = random(0,this.clientW - this.w); this.y = random(0,this.clientH - this.h); } move(ele){ // 開始運動之前,還得隨機生成目標 this.randomPos(); // 開始運動 move(ele,{ left:this.x,top:this.y },()=>{ // 一個動畫結束後,重複開啟當前動畫,即可 this.move(ele); }) } } for(var i=0;i<60;i++){ // 先得到例項 var g = new Glowworm(); // 生成隨機座標 g.randomPos(); // 再建立元素 g.createEle(); } function random(a,b){ return Math.round(Math.random()*(a-b)+b); } </script>
最後需要引入一個運動函式:
原生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]; } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。