一个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中的匀速运动和变速(缓冲)运动详细介绍的更多相关文章

  1. html5 canvas 实现光线沿不规则路径运动

    这篇文章主要介绍了html5 canvas 实现光线沿不规则路径运动,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. swift – 如何设置圆的物理属性,使其遵循给定的路径

    物理体圈的运动对于我想要达到的目标来说太不稳定了.我想限制它,以便它遵循某个特定点的路径,如下图所示.如何设置物理属性以遍历类似的路径?

  3. Android MotionEvent:查看运动是否发生在视图之外

    我有一个按钮和OnTouchListener附加到它.如何查找运动是在内部还是外部发生?

  4. 使用JavaScript 实现对象 匀速/变速运动的方法

    本篇文章是对JavaScript中实现对象匀速/变速运动的方法进行了详细的介绍。需要的朋友参考下

  5. 简单的页面缓冲技术

    那么我这里所指的页面缓冲是什么呢?就是指将动态生成的页面保存起来,供下一次的使用。所以对于经常变化的页面就不合适了。通过在模板中设置可替换的变量,然后根据实际的值替换相应的模板中的变量,同时可以将结果放到字符串中进行输出,这种模板类的处理非常适合保存处理后的页面。缓冲是一项有意义的技术,可以提高访问速度,减少系统消耗。

  6. 用缓冲技术提高JSP应用的性能和稳定性

    JSP代码块缓冲为开发者带来了随意地增加各种复杂信息的自由。OSCache标记库由OpenSymphony设计,它是一种开创性的JSP定制标记应用,提供了在现有JSP页面之内实现快速内存缓冲的功能。OSCache能够在任何JSP1.1兼容的服务器上运行,它不仅能够为所有用户缓冲现有JSP代码块,而且能够以用户为单位进行缓冲。但在这里,我们想要从网站的其余部分引用这个被缓冲的代码块,因此我们显式定义了该cache标记的key属性。

  7. angularJS 如何读写缓冲的方法(推荐)

    angularJS 如何读写缓冲?下面小编就为大家带来一篇angularJS 读写缓冲的方法(推荐)。希望对大家有所帮助。一起跟随小编过来看看吧

  8. jQuery实现横向带缓冲的水平运动效果(附demo源码下载)

    这篇文章主要介绍了jQuery实现横向带缓冲的水平运动效果,涉及jQuery中鼠标事件及animate方法使用技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下

  9. 网站加速 PHP 缓冲的免费实现方法

    文/徐永久我们知道Zend有免费的优化引擎针对PHP而作,但是FreeLAMP这次采用的是一个叫做PHPAccelerator的缓冲产品。我们在“LAMP加速”这篇文章中阐述过加速的几种办法,其中提到了PHPAccelerator,它的安装方法十分简单,但是需要去他的网站获取一个激活键。

  10. JS实现多物体运动

    这篇文章主要为大家详细介绍了JS实现多物体运动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部