原生JS實現螢火蟲效果

本文實例為大家分享了JS實現螢火蟲效果的具體代碼，供大家參考，具體內容如下

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

CSS部分（此處用元素模擬螢火蟲，背景可自行設置）：

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

JS部分：

1. <script>
2. class Glowworm{
3. constructor(){
4. // 獲取屏幕的可視區域的寬高，用作將來的隨機范圍
5. this.clientW = document.documentElement.clientWidth;
6. this.clientH = document.documentElement.clientHeight;
7. // 假設螢火蟲的寬高
8. this.w = 20;
9. this.h = 20;
10. }
11. createEle(){
12. var div = document.createElement("div");
13. div.className = "box";
14. document.body.appendChild(div);
15. // 在創建元素之前一定得先生成隨機坐標
16. div.style.left = this.x + "px";
17. div.style.top = this.y + "px";
18. // 元素創建好之后，立即運動
19. this.move(div);
20. }
21. randomPos(){
22. // 隨機生成坐標
23. this.x = random(0,this.clientW - this.w);
24. this.y = random(0,this.clientH - this.h);
25. }
26. move(ele){
27. // 開始運動之前，還得隨機生成目標
28. this.randomPos();
29. // 開始運動
30. move(ele,{
31. left:this.x,
32. top:this.y
33. },()=>{
34. // 一個動畫結束后，重復開啟當前動畫，即可
35. this.move(ele);
36. })
37. }
38. }
39.  
40. for(var i=0;i<60;i++){
41. // 先得到實例
42. var g = new Glowworm();
43. // 生成隨機坐標
44. g.randomPos();
45. // 再創建元素
46. g.createEle();
47. }
48.  
49. function random(a,b){
50. return Math.round(Math.random()*(a-b)+b);
51. }
52. </script>

最后需要引入一個運動函數：
原生JS封裝：帶有px的css屬性、透明度、且可以運動的函數。

1. function move(ele,obj,cb){
2. clearInterval(ele.t);
3. ele.t = setInterval(() => {
4. var i = true;
5. for(var attr in obj){
6. if(attr == "opacity"){
7. var iNow = getStyle(ele,attr) * 100;
8. }else{
9. var iNow = parseInt(getStyle(ele,attr));
10. }
11. let speed = (obj[attr] - iNow)/10;
12. speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
13. // 只要有一個屬性沒到目標：絕對不能清除計時器
14. if(iNow !== obj[attr]){
15. i = false;
16. }
17. if(attr == "opacity"){
18. ele.style.opacity = (iNow + speed)/100;
19. }else{
20. ele.style[attr] = iNow + speed + "px";
21. }
22. }
23. if(i){
24. clearInterval(ele.t);
25. if(cb){
26. cb();
27. }
28. // cb && cb();
29. }
30. }, 30);
31. }
32.  
33. function getStyle(ele,attr){
34. if(ele.currentStyle){
35. return ele.currentStyle[attr];
36. }else{
37. return getComputedStyle(ele,false)[attr];
38. }
39. }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持我們。