使用JavaScript 实现对象匀速/变速运动的方法(js应用实例)

编辑：rootadmin

实例1——控制一个对象的匀速移动和停止HTML：JS：实现向右运动要点：①if语句的条件不能用“==”运算符，如上述代码，当speed的值为基数如7时，不断增加的左边距不会出现px值，而是到达后直接跳到，导致条件失效，无法停止。②使用else语句是防止停止移动后，每点击一次按钮，div任会移动一个speed。③在定时器之前，先关闭一下定时器，防止连续点击按钮时，同时打开多个定时器，使移动速度叠加后更快。

封装：实例2——修改上述封装的函数moveto()，使该对象变速停止

JS：要点：①通过递减speed值，实现变速。②移动到最后，当像素小于1px时，小于1px的几个值不会被添加(或减去)到对象left中，而是被忽略，所以最终位移量比设定的水平位移位置itarget要少几个像素。解决的办法是进行取整：正数向上取整ceil()，负数向下取整floor()。

扩展：垂直位移的原理和水平位移的相同。

补充1：解决speed与itarget不能整除，导致对象不能精确到达itarget位置，而是在其左右抖动问题：补充2：

offset的Bug：例如offsetWidth，它包含的不只是width，还包含padding和border。当给对象设置了填充或边框时，再将offsetWidth赋值给对象时，就会运动就会有差异。解决：不用offset，而是通过创建一个兼容IE和FF的函数，获取元素的width属性值，来代替offsetWidth。该函数如下：getAttr()

推荐整理分享使用JavaScript 实现对象匀速/变速运动的方法(js应用实例)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:javascript运用,js使用方法,如何用javascript,js怎么使用,怎么用javascript,如何用javascript,javascript用法,javascript运用,内容如对您有帮助，希望把文章链接给更多的朋友！

使用JavaScript 实现各种跨域的方法一、一些概念①传统Ajax：交互的数据格式——自定义字符串或XML描述；跨域——通过服务器端代理解决。②如今最优方案：使用JSON格式来传输数据，

深入document.write()与HTML4.的非成对标签的详解（一）HTML4.中的非成对标签：注释标签：!--注释内容--严格来讲不算HTML标签的：!DOCTYPE文档声明标签设置页面元信息的：meta标签设置网页所有链接的

JavaScript 对任意元素,自定义右键菜单的实现方法一、一些概念：1、鼠标事件有一个botton属性：返回一个整数，用于表示点击的是哪个鼠标按键。BUG：在IE和标准DOM的鼠标事件中，唯一一个button属性值

使用JavaScript 实现对象 匀速/变速运动的方法(js应用实例)

使用JavaScript 实现对象匀速/变速运动的方法(js应用实例)