原生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实现原生ajax的几种方法介绍
Sep 21 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 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
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
Php图像处理类代码分享
2012/01/19 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
详解JavaScript中void语句的使用
2015/06/04 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
python实现从web抓取文档的方法
2014/09/26 Python
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
python使用zip将list转为json的方法
2018/12/31 Python
Python命令行click参数用法解析
2019/12/19 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
python入门教程之基本算术运算符
2020/11/13 Python
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
华为慧通面试题
2012/09/11 面试题
员工入职担保书范文
2014/04/01 职场文书
询价采购方案
2014/06/09 职场文书
岳庙导游词
2015/02/04 职场文书
何玥事迹观后感
2015/06/16 职场文书
python实现简单的名片管理系统
2021/04/26 Python
Nginx 常用配置
2022/05/15 Servers