JavaScript中的匀速运动和变速(缓冲)运动详细介绍


Posted in Javascript onNovember 11, 2012

一个div的运动其实就是它与浏览器边框的距离在变动。如果他变化的速率一定,那就是匀速运动;如果变化的速率不一定,那么就是变速运动。当,变化率与聚离浏览器边框的距离成比例的话,那么就可以说是div在做缓冲运动。
其实,很简单,就是用一个定时器(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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
javascript中的几个运算符
Jun 29 Javascript
js DOM 元素ID就是全局变量
Sep 20 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
vue v-for 使用问题整理小结
Aug 04 Javascript
vue实现购物车结算功能
Jun 18 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 Javascript
jQuery语法总结和注意事项小结
Nov 11 #Javascript
javascript继承之为什么要继承
Nov 10 #Javascript
jquery表单验证使用插件formValidator
Nov 10 #Javascript
js 判断checkbox是否选中的操作方法
Nov 09 #Javascript
JS的replace方法详细介绍
Nov 09 #Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 #Javascript
javascript模拟select,jselect的方法实现
Nov 08 #Javascript
You might like
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
浅谈Python中函数的参数传递
2016/06/21 Python
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
Python编写一个优美的下载器
2018/04/15 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
django query模块
2019/04/20 Python
python打包成so文件过程解析
2019/09/28 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
请说出以下代码输出什么
2013/08/30 面试题
体育教育个人自荐信范文
2013/12/01 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
我的中国心演讲稿
2014/09/04 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL