系统城装机大师 - 固镇县祥瑞电脑科技销售部宣传站!

当前位置:首页 > 网络编程 > JavaScript > 详细页面

原生JS实现萤火虫效果

时间:2020-03-07来源:电脑系统城作者:电脑系统城

本文实例为大家分享了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. }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

分享到:

相关信息

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载