JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012-11-11 00:00
1011 查看
一个div的运动其实就是它与浏览器边框的距离在变动。如果他变化的速率一定,那就是匀速运动;如果变化的速率不一定,那么就是变速运动。当,变化率与聚离浏览器边框的距离成比例的话,那么就可以说是div在做缓冲运动。
其实,很简单,就是用一个定时器(timer),每隔一段时间来改变div聚浏览器边框的距离。
比如匀速运动:
进入定时器:(每隔30ms做)
if(是否到达终点)
{ 停止定时器}
else do{ 改变距离}
改变距离的方法决定是匀速还是变速(缓冲)运动。
匀速的比如:
缓冲运动:
这样,一个运动框架就写好了!原理很简单,不过还有待完善。慢慢来吧!
其实,很简单,就是用一个定时器(timer),每隔一段时间来改变div聚浏览器边框的距离。
比如匀速运动:
进入定时器:(每隔30ms做)
if(是否到达终点)
{ 停止定时器}
else do{ 改变距离}
改变距离的方法决定是匀速还是变速(缓冲)运动。
匀速的比如:
var timer=null; function startMove() { var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function () { var iSpeed=1; if(oDiv.offsetLeft>=300) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; } },30); };
缓冲运动:
var timer=null; function startMove() { var iTarget=300; var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function () { var iSpeed=(iTarget-oDiv.offsetLeft)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); iSpeed=Math.ceil(iSpeed); if(oDiv.offsetLeft==iTarget) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; } document.title=oDiv.style.left+' '+iSpeed; },30); };
这样,一个运动框架就写好了!原理很简单,不过还有待完善。慢慢来吧!
相关文章推荐
- JavaScript中的匀速运动和变速(缓冲)运动详细介绍
- JavaScript中的匀速运动和变速(缓冲)运动
- 介绍几种运动——匀速、加速、缓冲、弹性
- JavaScript中的闭包(Closure)详细介绍
- JavaScript中关于Cookie的详细介绍
- JavaScript 动画之缓冲运动
- javascript动画之匀速运动
- javaScript js中获取时间new Date()详细介绍
- javascript typeof的用法与typeof运算符介绍[详细]第1/2页
- javascript中的变量作用域以及变量提升详细介绍
- JavaScript运动之缓冲运动
- javaScript中获取时间new Date()详细介绍
- JavaScript详细教程三之 对象简单介绍
- JavaScript详细教程三之 对象具体介绍
- javascript相等运算符与等同运算符详细介绍
- javascript 运动缓冲效果
- javascript基础之查找元素的详细介绍(访问节点)
- 缓冲运动(变速)
- Node.js中的缓冲与流模块详细介绍