javascript 缓冲运动demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.div01 {
position: absolute;
left: 0;
width: 100px;
height: 100px; background: red;
}
button {
position: absolute;
top: 200px;
}
ul,li{
list-style: none;
}
</style>
</head>
<body>
<div class="div01" id="div01"></div>
<button id='js-btn'>点击控制div</button>
<script>
/******************************************
缓冲运动的实际原理就是两个物体的距离相减在除
一个数，同时要注意给这个速度值取整
******************************************/
window.onload = function () {
var div01 = document.getElementById('div01');
var btn = document.getElementById('js-btn');
var timer = null;
function startMove (iTarget) {
timer = setInterval(function(){
var speed = 0;
speed = (iTarget-div01.offsetLeft)/8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if( div01.offsetLeft <= iTarget ){
div01.style.left = div01.offsetLeft + speed + "px";
document.title = div01.offsetLeft + "..." + speed;
}else{
clearInterval(timer);
} },100);
}
btn.onclick = function () {
startMove(300);
};
}; </script>
</body>
</html>
javascript 缓冲运动demo的更多相关文章
- Javascript 缓冲运动——逐行分析代码，让你轻松了解缓冲运动的原理
看过上一篇关于Javascript 匀速运动文章的朋友相信对于运动已经有了初步的了解 接下来 讲一下关于缓冲运动的原理 ,我会逐行分析代码,代码简单易懂,能马上理解其中的原理,适用于初学者. #div ...
- day39—JavaScript缓冲运动
转行学开发,代码100天!——2018-04-24 今天继续学习JavaScript运动之缓冲运动.相对于匀速运动,缓冲运动的不同之处在于其速度值是不断变化的,越靠近目标点,速度越小. 即可以表示为: ...
- 原生JavaScript运动功能系列（二）：缓冲运动
匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...
- javaScript运动框架之缓冲运动
缓冲运动 逐渐变慢,最后停止 距离越远速度越大 速度由距离决定 速度=(目标值-当前值)/缩放系数 存在Bug 速度取整 跟随页面滚动的缓冲侧边栏 潜在问题:目标值不是整数时 缓冲运动的停止条件 ...
- javascript运动系列第五篇——缓冲运动和弹性运动
× 目录 [1]缓冲运动 [2]弹性运动 [3]距离分析[4]步长分析[5]弹性过界[6]弹性菜单[7]弹性拖拽 前面的话 缓冲运动指的是减速运动,减速到0的时候,元素正好停在目标点.而弹性运动同样是 ...
- javascript每日一练（十）——运动二：缓冲运动
一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...
- JavaScript 运动（缓冲运动，多物体运动 ,多物体多值运动+回调机制）
匀速运动 (当需要物体做匀速运动直接调用statMove函数) function startMove(dom,targetPosetion){ //dom : 运动对象,targetPositio ...
- 关于javascript的运动教程
一.javascript的匀速运动 关于物体的javascript匀速运动要点分析: 1.物体关于运动的时候,我们要打开定时器 2.打开定时器的时候我们记得要在停止的时候关闭定时器,同时应该注意的是一 ...
- js动画之缓冲运动
缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...
随机推荐
- LVM命令摘要
命令 描述 物理卷(PV) pvcreate 创建LVM磁盘 #pvcreate /dev/sdb pvdisplay 显示卷组中的物理卷信息 pvchange 设置PV的性能,允许或拒绝 ...
- codevs 4650 破损的键盘（链表）
/* 之前一直不重视链表 (好吧说实话主要是看着板子都是指针就怂了T.T) 这道题比较基础 应用了链表的思想 数组模拟指针 遇到的问题就是跑着跑着光标跳到前面或者跳到后面 我们用next储存每个点下一 ...
- Redhat Enterprise 5.4下安装配置Oracle 11g R2详细过程
1.Linux环境配置准备 环境:Linux:Redhat Enterprise 5.4,DB:Oracle 11g R2 X64,Oracle安装到/home/oralce_11目录下. 配置过程如 ...
- 武汉科技大学ACM：1010: 零起点学算法27——判断是否直角三角形
Problem Description 输入三个整数,分别代表三角形的三条边长度,判断能否构成直角三角形 Input 输入3个整数a,b,c(多组数据,-5000000<a,b,c<500 ...
- hdu 2480 贪心+简单并查集
Steal the Treasure Time Limit: 10000/6000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- PowerShell: 如何解决File **.ps1 cannot be loaded because the execution of scripts is disabled on this sy
PowerShell 默认不允许执行*.ps1脚本文件.运行ps1文件会得到下面的错误: File C:\Temp\Test.ps1 cannot be loaded because the exec ...
- JQUERY1.9学习笔记 之基本过滤器(五) 大于选择器
大于选择器:jQuery( ":gt(index)" )jQuery( ":gt(-index)" ) 例:大于TD5 到TD8 用黄色背景,TD8用红色文字. ...
- 【学习笔记】【Foundation】集合Set
不可变集合 NSSet :集合元素无顺序,没有索引号,元素不可重复. NSSet在功能上可看做是NSArray的父集,它是一个更通用的类. NSSet包含如下常用方法: setByAddingObje ...
- Dropbox可伸缩性设计最佳实践分享
http://www.infoq.com/cn/news/2012/11/dropbox-scale-bestpractice Dropbox的运维工程师Rajiv,跟大家分享了可伸缩性设计的最佳实践 ...
- AE-后期制作的基本技能-小视频-实践!!
这是本人学习AE软件的实践练习,看来,学习基本技能要慢慢来,稳步前进,一步一个脚印才对!!同时,多观看别人的作品,多看一下电视上面的片头,广告的效果;学习AE要带着问题,思路来学习!多做理论联系实际操 ...