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 相关文章推荐
kmock javascript 单元测试代码
Feb 06 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 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手册及PHP编程标准
2006/12/17 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
js制作提示框插件
2020/12/24 Javascript
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
Python模块常用四种安装方式
2020/10/20 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
事假请假条范文
2014/04/11 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
班风口号
2014/06/18 职场文书
先进工作者申报材料
2014/12/23 职场文书
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang