javaScript运动框架之缓冲运动
缓冲运动
逐渐变慢，最后停止
距离越远速度越大
速度由距离决定
速度=(目标值-当前值)/缩放系数
存在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：
javaScript运动框架之缓冲运动的更多相关文章
- javascript每日一练（十）——运动二：缓冲运动
一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...
- JS运动---运动基础（缓冲运动）
(1)手风琴效果 分析: (2)基础缓冲运动 接下来取整 原因: px为计算机识别的最小单位,1px无法再往下拆分.所以css如果取值200.5px,解析时计算机会自动将其改为200px注意:这里的数 ...
- Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理
所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...
- Javascript之运动框架2
运动框架2与运动框架1的不同之处在于,运动框架2是框架1的升级版,首先完善了传入值,改为move(obj,json,options),在options里面,可以选择传入或者不传入时间,运动形式,以及函 ...
- JS学习之路，之弹性运动框架
弹性运动:顾名思义,就如同物理中的加速减速运动,当开始时速度过大,到达终点时,速度不会立刻停下,而是再前进一段距离,而后再向相反方向运动,如此往复. var timer=null; var speed ...
- javascript中的动画的实现以及运动框架的编写（1）
大家知道js可以做出好多很漂亮的动画,看上去很神奇,其实原理很简单,今天就讨论一下js动画的实现以及如何编写可以反复重用的运动框架. 首先做一个简单的例子,我这里有一个长50px 宽20px的长条形d ...
- 好程序员技术教程分享JavaScript运动框架
好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...
- 点滴积累【JS】---JS小功能（JS实现多功能缓冲运动框架)
效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...
- JavaScript 基础入门11 - 运动框架的封装
目录 JavaScript 运动原理 运动基础 简单运动的封装 淡入淡出 不同属性的设置 多属性值同时运动 运动回调,链式运动 缓冲运动 加入缓冲的运动框架 案例1 多图片展开收缩 运动的留言本 Ja ...
随机推荐
- Java常考面试题整理(二)
21.Iterator和ListIterator的区别是什么? 参考答案: 下面列出了他们的区别: Iterator可以用来遍历Set和List集合,但是ListIterator只能用来遍历List. ...
- spark streaming 2: DStream
DStream是类似于RDD概念,是对数据的抽象封装.它是一序列的RDD,事实上,它大部分的操作都是对RDD支持的操作的封装,不同的是,每次DStream都要遍历它内部所有的RDD执行这些操作.它可以 ...
- 威胁猎杀实战（三）：基于Wazuh, Snort/Suricata和Elastic Stack的SOC
https://www.secpulse.com/archives/81629.html
- 1.4 Navicat Mybatis 占坑
MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以使用简单的 XML ...
- 线性回归和正则化（Regularization）
python风控建模实战lendingClub(博主录制,包含大量回归建模脚本和和正则化解释,2K超清分辨率) https://study.163.com/course/courseMain.htm? ...
- C# CancellationTokenSource.Cancel 取消线程很鸡肋？
例子: CancellationTokenSource cts ; void MainWindow_Loaded(object sender, RoutedEventArgs e) { Task.Ru ...
- 算法 - 剪枝游戏 - Green Hackenbush
场景:给颗树,轮流剪掉一条枝,没枝可剪的人输. 题目:Deforestation | HackerRank 讲解:Games!: Green Hackenbush 哎,差点自己想出来答案,最后还是看了 ...
- arguments对象的callee属性详解
在函数内部,有两个特殊的对象:arguments和this. argument对象有一个名叫callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数.请看下面这个非常经典的阶乘函 ...
- 错误：expected initializer before "***"
今天写了一个程序,编译时报了一个错误:expected initializer before "***"报错的语句只是程序开头的一个变量定义语句,怎么会有这样的错误呢,琢磨了半天也 ...
- LeetCode.927-独特邮箱地址(Unique Email Addresses)
这是悦乐书的第356次更新,第383篇原创 01看题和准备 今天介绍的是LeetCode算法题中Easy级别的第218题(顺位题号是927).每封电子邮件都包含本地名称和域名,以@符号分隔. 例如,在 ...