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 相关文章推荐
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
jQuery 树形结构的选择器
Feb 15 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
自定义事件解决重复请求BUG的问题
Jul 11 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 Javascript
vue绑定class的三种方法
Dec 24 Vue.js
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
js单例模式详解实例
2013/11/21 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
基于javascript的异步编程实例详解
2017/04/10 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
Python中__init__和__new__的区别详解
2014/07/09 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
艺术节主持词
2014/04/02 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
2015年个人招商工作总结
2015/04/25 职场文书
机器人总动员观后感
2015/06/09 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
浅析Django接口版本控制
2021/06/26 Python
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python