html萤火虫特效代码,原生JS实现萤火虫效果
本文实例为大家分享了JS实现萤火虫效果的具体代码,供大家参考,具体内容如下
上代码之前,先看一下效果:
CSS部分(此处用元素模拟萤火虫,背景可自行设置):
.box{width: 4px;height: 5px;background: wheat;position: absolute;border-radius: 50%;}
body{background: url(../img/bg.jpg) ;}
JS部分:
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);
}
最后需要引入一个运动函数:
原生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];
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html萤火虫特效代码,原生JS实现萤火虫效果相关推荐
- 原生js实现放大镜效果
记录一次原生js实现放大镜效果. 文章目录 效果图 设计思路 基本架子 蒙版 放大效果图 逻辑设计 蒙版跟放大的图肯定要先隐藏 鼠标移入图片显示蒙版 鼠标移动蒙版跟着移动 处理边界情况 大图移动 小优 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- html制作满天星,怎样使用原生js做出满天星效果
这次给大家带来怎样使用原生js做出满天星效果,使用原生js做出满天星效果的注意事项有哪些,下面就是实战案例,一起来看一下. 代码如下://图片自己加入改变路径 html{height: 100%;} ...
- 原生js实现如下效果: 一个按钮,点击它会弹出对话框,但5秒内再点击不会再弹出对话框。5秒后恢复正常。
原生js实现如下效果: 一个按钮,点击它会弹出对话框,但5秒内再点击不会再弹出对话框.5秒后恢复正常. 第一种方式: 使用函数节流的方式(就是设置一个变量,来一个判断语句,判断这个变量的值.为真或假执 ...
- 原生JS实现分页效果
做开发久了,会越来越依赖框架,毕竟利用框架可以快速的完成工作任务,如常见的分页效果,只需要与后端配合,由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能,就可以轻松的实现分页效果,那如果在不 ...
- 原生js漂浮广告效果
原生js漂浮广告效果 静态页面代码 <body><div id="box"><img src="1.jpg" alt=" ...
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html> <html lang="en"> ...
- 原生js添加动画效果
原生js添加动画效果 html 这个图片是使用阿里图标需要下载 <div class="content"><div class="contAnimati ...
- html flappybird小游戏代码,原生js实现Flappy Bird小游戏
这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习. html结构 css样式 #game { width: 800px; height: 600px; border: 1px s ...
最新文章
- “蚁人”不再是科幻!MIT最新研究,能把任何材料物体缩小1000倍 | Science
- python图像变形
- Io 异常: The Network Adapter could not establish the connection解决方案
- 央视曝徐梦桃夺冠黑科技:竟然还有个虚拟教练???
- python是什么公司开发的软件-python适合开发桌面软件吗?
- [Leetcode] Binary Tree PosterOrder Travel
- idea中新建分支并且切换到新建的分支上
- const 一级指针的启示
- linux运行级别与服务
- Python十行代码带你穿越管世界
- dante pam mysql_FreeBSD下安装dante(sockd)并使用pam-pwdfile进行认证
- php学习_第8章_PHP面向对象的程序设计
- 如何在 Mac 上使用“旁白实用工具”自定“旁白”?
- 《操作系统真象还原》——0.6 为什么称为“陷入”内核
- IE11 与 XPath
- Hive beeline详解
- 树莓派机器视觉环境搭建
- java 对Excel 操作 例子(下)
- class-dump导出iOS系统私有库以及简单的私有API调用
- Spring boot + Jsoup 搭建高清视频解析系统接口只需1分钟
热门文章
- 简单几步实现钉钉多次自动打卡
- Alpha测试和Beta测试简介
- fatal: 无法访问 ‘‘github.com/“:GnuTLS recv error (-110): The TLS connection was non-properly terminated.
- 菜刀php后门,关于菜刀后门排查
- Win11电脑没有声音如何解决
- dz每个php模板页文件,dz模板引擎分析
- 人事管理系统(Mysql+Java)
- perp系列之六:perp工作截屏
- 使用dockers在服务器操作redis,下载安装测试等
- angular打包文件目录及访问地址