原生JS实现萤火虫效果


Posted in Javascript onMarch 07, 2020

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

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

Javascript 相关文章推荐
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
js读取配置文件自写
Feb 11 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
Javascript call及apply应用场景及实例
Aug 26 Javascript
JavaScript实现轮播图片完整代码
Mar 07 #Javascript
JS实现瀑布流效果
Mar 07 #Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 #Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 #Javascript
node创建Vue项目步骤详解
Mar 06 #Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 #Javascript
小程序跳转H5页面的方法步骤
Mar 06 #Javascript
You might like
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
Windows 64位下python3安装nltk模块
2018/09/19 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
超级实用的8个Python列表技巧
2020/08/24 Python
EJB与JAVA BEAN的区别
2016/08/29 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
人力资源专员自我评价怎么写
2013/09/19 职场文书
三年级语文教学反思
2014/02/01 职场文书
法人委托书范本格式
2014/09/15 职场文书
2016公司年会主持词
2015/07/01 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
Django程序的优化技巧
2021/04/29 Python