原生JS实现萤火虫效果

 更新时间:2020年03月07日 10:30:16   作者:huangfuyk.  
这篇文章主要为大家详细介绍了原生JS实现萤火虫效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

相关文章

  • 使用D3.js构建实时图形的示例代码

    使用D3.js构建实时图形的示例代码

    这篇文章主要介绍了使用D3.js构建实时图形的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 学做Bootstrap的第一个页面

    学做Bootstrap的第一个页面

    这篇文章主要为大家介绍了学做Bootstrap的第一个页面,这是学bootstrap的第一个页面,还有许多需要改进的地方,希望大家批评指正
    2016-05-05
  • Javascript中eval函数的详细用法与说明

    Javascript中eval函数的详细用法与说明

    Javascript中eval函数的详细用法与说明...
    2007-03-03
  • axios基本入门用法教程

    axios基本入门用法教程

    之前当vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法。文中介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-03-03
  • 微信小程序事件对象中e.target和e.currentTarget的区别详解

    微信小程序事件对象中e.target和e.currentTarget的区别详解

    这篇文章主要介绍了微信小程序事件对象中e.target和e.currentTarget的区别详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • ZeroClipboard.js使用一个flash复制多个文本框

    ZeroClipboard.js使用一个flash复制多个文本框

    这篇文章主要为大家详细介绍了ZeroClipboard.js使用一个flash复制多个文本框,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JS访问DOM节点方法详解

    JS访问DOM节点方法详解

    这篇文章主要介绍了JS访问DOM节点方法,结合实例形式较为详细的分析了JS访问DOM节点的相关函数与使用方法,需要的朋友可以参考下
    2016-11-11
  • 谈谈我对JavaScript DOM事件的理解

    谈谈我对JavaScript DOM事件的理解

    DOM与事件是JavaScript最核心的组成部分之一,他们赋予了页面无限的想象空间,你根本无法离开他们,否则js将寸步难行。本文给大家分享我对javascript dom事件的了解,对javascript dom事件相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • javascript中call,apply,callee,caller用法实例分析

    javascript中call,apply,callee,caller用法实例分析

    这篇文章主要介绍了javascript中call,apply,callee,caller用法,结合实例形式分析了javascript中call,apply,callee,caller功能、使用方法及相关操作注意事项,需要的朋友可以参考下
    2019-07-07
  • chrome不支持form.submit的解决方案

    chrome不支持form.submit的解决方案

    最近在解决项目中网站浏览器兼容性问题,发现chrome竟然不支持form.submit,经网上搜寻,终于找到了解决方案,有需要的小伙伴参考下。
    2015-04-04

最新评论