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

更新时间：2013年05月08日 17:52:45 作者：

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

实例1——控制一个对象的匀速移动和停止

HTML：

<input id="btn" type="button" value=" Move It ! "/>
    <div id="d1">
        <img id="i1" src="1.jpg" alt/>
    </div>

JS：实现向右运动

复制代码代码如下:

var timer=null;
    window.onload=function(){
        var odiv=document.getElementById('d1');
        var obtn=document.getElementById('btn');
        clearInterval(timer); //作用见要点①
        obtn.onclick=function(){
            timer=setInterval(function(){
                var speed=10;
                if(odiv.offsetLeft>=300){ //判断对象边距 到达指定位移则关闭定时器
                    clearInterval(timer);
                }else{
                    odiv.style.left=odiv.offsetLeft+speed+'px';
                }
            },30);
        }
    }

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

封装：

复制代码代码如下:

//object:要移动的对象id   itarget:水平位移位置
　 　var timer=null;
    function moveto(object,itarget){
        var obj=document.getElementById(object);
            clearInterval(timer);
            timer=setInterval(function(){
                var speed=0;
                if(obj.offsetLeft<itarget){  //通过对象距离父级的边距和水平位移量 判断左右位移方向
                    speed=10;
                }else{
                    speed=-10;
                }
                if(obj.offsetLeft==itarget){
                    clearInterval(timer);
                }else{
                    obj.style.left=obj.offsetLeft+speed+'px';
                };
            },30);
    }

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

JS：

复制代码代码如下:

var timer=null;
    function moveto(object,itarget){
        var obj=document.getElementById(object);
            clearInterval(timer);
            timer=setInterval(function(){
                var speed=0;
                if(obj.offsetLeft<itarget){//通过位移量除以10，使speed递减，实现减速停止。   乘以10则为加速。通过乘除的数字，控制快慢
                    speed=(itarget-obj.offsetLeft)/10; 
                }else{
                    speed=-(obj.offsetLeft-itarget)/10;
                }
                speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整，解决最后不足1px的位移量被忽略的问题
                if(obj.offsetLeft==itarget){
                    clearInterval(timer);
                }else{
                    obj.style.left=obj.offsetLeft+speed+'px';
                };
                document.title=obj.offsetLeft;
            },30);
    }

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

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

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

复制代码代码如下:

var timer=null;
    function moveto(object,itarget){
        var obj=document.getElementById(object);
            clearInterval(timer);
            timer=setInterval(function(){
                var speed=0;
                if(obj.offsetLeft<=itarget){
                    speed=7;
                }else{
                    speed=-7;
                }
//设置对象在离目标位置itarget的距离小于speed时，停止运动，同时设置对象的left直接移动到itarget的位置。
                if(Math.abs(itarget-obj.offsetLeft<=speed)){
                    clearInterval(timer);
                    obj.style.left=itarget+'px';
                }else{
                    obj.style.left=obj.offsetLeft+speed+'px';
                };
                document.title=obj.offsetLeft;
            },30);
    }

补充2：

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

复制代码代码如下:

function getAttr(obj,attrName){
        var obj=document.getElementById(obj);
        if(obj.currentStyle){
            return obj.currentStyle[attrName]; //兼容IE
        }else{
            return getComputedStyle(obj,false)[attrName]; //兼容FF
        }
    }

您可能感兴趣的文章:

Javascript数组Array基础介绍
本文主要是给大家简单介绍了Array的相关基础知识，到这里也算是能对Array有更全面的理解了，希望大家能够喜欢，后续我们将继续介绍关于array的内容。
2016-03-03
javascript 数组的方法集合
我们经常用到js的数组，因为他方便控制，所以他的一些方法，大家一定要熟练应用
2008-06-06
Javascript调试工具（下载）
Javascript调试工具（下载）...
2007-01-01
JavaScript函数中上下文有哪些规则
上下文是从英文context翻译过来，指的是一种环境。在软件工程中，上下文是一种属性的有序序列，它们为驻留在环境内的对象定义环境。在对象的激活过程中创建上下文，对象被配置为要求某些自动服务。又比如计算机技术中，相对于进程而言，上下文就是进程执行时的环境
2021-10-10
JavaScript稀疏数组示例教程
这篇文章主要为大家介绍了JavaScript稀疏数组的使用示例教程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
初识JavaScript的基础
这篇文章主要介绍了javascript的一些基础知识，内容很全面，特别适合刚刚学习javascript的朋友学习，希望能帮助到大家
2021-10-10
JavaScript中的一些定位属性[图解]
JavaScript获取页面中的一些定位属性说明，需要了解，页面定位控制的朋友可以参考下。
2010-07-07
JavaScript中Number.MIN_VALUE属性的使用示例
这篇文章主要介绍了JavaScript中Number.MIN_VALUE属性的使用示例,是JS入门学习中的基础知识,需要的朋友可以参考下
2015-06-06
document.styleSheets[0].disabled
document.styleSheets[0].disabled...
2006-10-10
Javascript学习笔记之数组的遍历和 length 属性
我们一般用循环来遍历数组，而循环一直是 JavaScript 性能问题的常见来源，有时循环用得不好会严重降低代码的运行速度。数组的属性可以分为三种:length属性,索引属性,其他属性.和普通对象相比,数组对象特殊的地方就是它的length属性和索引属性。
2014-11-11