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 相关文章推荐
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 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+DBM的同学录程序(3)
2006/10/09 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
php+mysql数据库查询实例
2015/01/21 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
javascript基本算法汇总
2016/03/09 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
django 信号调度机制详解
2019/07/19 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
python中format函数如何使用
2020/06/22 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
房地产出纳岗位职责
2013/12/01 职场文书
上班玩手机检讨书
2014/02/17 职场文书
人与自然观后感
2015/06/16 职场文书
七一慰问简报
2015/07/20 职场文书
python tkinter模块的简单使用
2021/04/07 Python