javaScript运动框架之缓冲运动
2024-08-30 10:49:33
缓冲运动
逐渐变慢,最后停止
距离越远速度越大
速度由距离决定
速度=(目标值-当前值)/缩放系数
存在Bug
速度取整
跟随页面滚动的缓冲侧边栏
潜在问题:目标值不是整数时
缓冲运动的停止条件
运动终止条件:两点重合(即运动物体和目的地重合)
Demo代码
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>缓冲运动</title>
<style>
.sport {
width: 60px;
height: 60px;
background-color: #FC4209;
border-radius: 5px;
position: absolute;
top: 60px;
text-align: center;
line-height: 60px;
} #div1 {
top: 60px;
left: 0;
} #div2 {
top: 150px;
left: 900px;
} #reference {
width: 1px;
height: 260px;
background-color: black;
position: fixed;
top: 20px;
left: 450px;
}
</style>
<script>
function startMove(obj, iTarget) {
let timer = null;
let oDiv1 = document.getElementById(obj); clearInterval(timer);
timer = setInterval(function () {
let iSpeed = (iTarget - oDiv1.offsetLeft) / 12;
// Math.ceil() 向上取整 Math.floor() 向下取整
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if (oDiv1.offsetLeft == iTarget) {
clearInterval(timer);
} else {
oDiv1.style.left = oDiv1.offsetLeft + iSpeed + 'px';
}
}, 30);
}
</script>
</head> <body>
<input type="button" value="开始运动" onclick="startMove('div1',450)" />
<input type="button" value="开始运动" onclick="startMove('div2',450)" />
<div id="div1" class="sport">A</div>
<div id="div2" class="sport">B</div>
<div id="reference"></div>
</body> </html>
效果图A:
效果图B:
最新文章
- C++学习笔记 封装 继承 多态 重写 重载 重定义
- PowerShell Script to Deploy Multiple VM on Azure in Parallel #azure #powershell
- sqlserver -- 学习笔记(四)将一个数据库的表复制到另外一个数据库(备忘)
- IntelliJ IDEA 14 SVN无法正常使用问题
- 3.Python编程语言基础技术框架
- 就地交叉数组元素[a1a2b1b2]->;[a1b1a2b2]
- JQuery Pagination 分页插件 增加了首页尾页以及跳转功能
- shell脚本分为三类:登录脚本、交互式脚本、非交互式脚本
- 小白日记12:kali渗透测试之服务扫描(二)-SMB扫描
- 【NOIP 2016 总结】
- HDU-1995-汉诺塔V
- SpringBoot中过滤器、监听器以及拦截器
- bzoj 1592 dp
- 学习python的第一天
- [LeetCode] Most Profit Assigning Work 安排最大利润的工作
- java 大文件分割与组装
- 爬虫系列之BeautifulSoup
- shell脚本学习之参数传递
- (7)路由层的分发(不同app各自管理自己的和app的注册)
- jsonDB使用手冊
热门文章
- centos6.9 samba配置
- 全面解读php-开发环境及配置
- OpenCV学习笔记(4)——图像上的算术运算
- C++ lower_bound
- python 连接 hive数据库环境搭建
- elasticsearch mappings之dynamic的三种状态
- 20191209 Linux就该这么学(4)
- [ASP.NET] [JS] GridView点击高亮当前选择行,并在点击另一行时恢复上一选择行背景颜色
- Centos7搭建Open-ldap
- Node.js 博客搭建