JS-缓冲运动基础结构
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>缓冲运动2</title>
<style type="text/css">
a{display: block;}
input[type='button']{
margin-top: 5px;
}
.div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 200px;
cursor: pointer;
}
.div2{
width: 1px;
height: 1200px;
position: absolute;
left: 300px;
top: 0;
background-color: blueviolet;
/*用这个标杆，发现div1并没有走到300的准确位置，原因是？*/
}
</style>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
start();
}
}
function start(){
var oDiv = document.getElementById('div');
setInterval(function(){
var speed = Math.ceil((300-oDiv.offsetLeft)/10);
//300,是自己定义的他要停止的位置值，
//除以10 是必须的，这样就能有效地成倍地降低速度值，注意，更改10的值，可以更改速度，这个10所在分母位置的数值越大，速度越小。
// var speed = Math.ceil((300-oDiv.offsetLeft)/10);
//如果整除不了，会有0.5px，有了小数点，计算机会直接删掉小数点后的数字，导致物体运动不到准确位置。所以最后，用math的ceil方法，向上取整；floor方法，向下取整。
//因为向左走向右走是不确定的，所以用三元判断的方法，如下：
speed = speed>0?Math.ceil(speed):Math.floor(speed);
//但凡遇到缓冲运动，一定要取整
oDiv.style.left = oDiv.offsetLeft+speed+'px';
document.title = oDiv.offsetLeft+','+speed;//用以检查、调试运动点是否正常
},30);
} </script>
</head> <body>
<p>关键点：</p>
<a>距离大，速度大</a>，，，
<a>距离小，速度小</a>
<a>距离和速度成正比</a>
<p style="color: brown;">关键点:遇到“缓冲运动”，一定要取整</p>
<input type="button" value="运动" id="btn" />
<div class="div" id="div"></div>
<div class="div2"></div> </body> </html>
课程来源路径：智能社得开发课程：https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc
JS-缓冲运动基础结构的更多相关文章
- JS缓冲运动案例：右侧居中悬浮窗
JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...
- JS缓冲运动案例：右下角悬浮窗
JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...
- js缓冲运动
缓冲运动 现象:逐渐变慢,最后停止 原理:距离越远,速度越大 速度的计算方式: 1,速度由距离决定 2,速度＝(目标值-当前值)/缩放系数 说明:速度为正负数时,也决定了物体移动的方向 示例:div缓 ...
- JS缓冲运动案例
点击"向右"按钮,红色的#red区块开始向右缓冲运动,抵达到黑色竖线位置自动停止,再次点击"向右"#red区块也不会再运动.点击"向左"按钮 ...
- [Js]缓冲运动
一.运动框架 1.在开始运动时,关闭已有定时器(否则会不断有新的定时器执行) 2.把运动和停止隔开(if/else) 二.缓冲运动 逐渐变慢,最后停止(距离越远速度越大) 速度=(目标值-当前值)/缩 ...
- JS 缓冲运动 带运动的留言本 小案例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...
- js实现缓冲运动，和匀速运动有点不相同
缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...
- js动画之缓冲运动
缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...
- JS运动基础(二) 摩擦运动、缓冲运动
摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...
随机推荐
- Python——uuid
uuid模块在Python 2.5以后引入,接口包括:不可变对象UUID(UUID类)和函数uuid1().uuid3().uuid4()和uuid5(),后面的四个函数用于生成 RFC 4122 规 ...
- Linux学习笔记<五>——<Shell部分>
管道命令(pipe) 1.把一个命令的输出作为另一个命令的输入 ls -al /etc | less 2.选取命令:cut和grep cut命令可以将一段消息的某段切出来. -d接分隔符,-f是取出第 ...
- 监听事件绑定（addEventListener、attachEvent）和移除（removeEventListener、detachEvent）
/** * @description 事件绑定,兼容各浏览器 * @param target 事件触发对象 * @param type 事件 * @param func 事件处理函数 */ funct ...
- jiffies存放
固然书本上讲明jiffies是jiffies_64的低32位,但是我还是自己测试了下,重点在于链接脚本的写法. 此处只是为了测试,因此简化链接脚本. /* link.lds */ 1 ENTRY(_s ...
- swift闭包的另一种用法
这不是教程. 当你碰到函数参数需要传递一个闭包(closure)时,一般是可以直接这么传递的(假定无返回): // 教程一般教你在参数位置传递closure: someMethod(arg1, arg ...
- Node.js+Express on IIS(续)
前一篇文章介绍了如何用iis来伺服node网站(开发期间特别有用),结果还落掉一点,我们用node来做restful服务的时候,很多时候可能要响应500系列的状态码,并不是整个系统从头到尾都是200, ...
- adb错误：Failed to execute android command 'adb devices'.
好吧,我是用的phonegap3.0开发的,很简单,安装的时候一句phonegap run android –device就可以了(-device参数非必要,我是为了不跑模拟器,加上此参数限制只跑到设 ...
- mysql中查看数据库的版本，什么版本
需求:查看当前使用的数据库是哪个版本的,什么版本 select version(); 查询结果: 备注:通过version()函数查询出来当前使用的数据库版本是5.5.57-log 文档创建时间:20 ...
- xcode修改默认头部注释(__MyCompanyName__) (转)
打开命令行: defaults write com.apple.Xcode PBXCustomTemplateMacroDefinitions '{ "ORGANIZATIONNAME&qu ...
- Xcode文件被锁定：The file ".xcodeproj" could not be unlocked
同事从svn上面checkout项目到本地,通过xcode打开的时候提示的这个问题. The file "xcodeproj" could not be unlocked. Cou ...