利用javaｓｃｒｉｐｔ实现对象匀速运动的方法

示例1 -控制对象的恒定移动和停止

HTML：
复制代码代码如下所示：
JS：正确动作的实现
复制代码代码如下所示：
var定时器= null；
窗口。指针函数（）{
无功odiv = document.getelementbyid（'d1）；
VaR的OBTN = document.getelementbyid（'btn）；
ClearInterval（定时器）； / /看到的关键作用
Obtn。onclick =函数（）{
定时器= setInterval（）{（）函数（
var速度= 10；
如果（odiv。offsetleft > = 300）{ / /对象边缘达到指定位移关闭定时器
ClearInterval（定时器）；
其他{ }
Odiv。风格。左= odiv offsetleft +速度+ 'px；
}
}，30）；
}
}

主要点uff1a
条件是不是如果语句中使用= =运算符，如上面的代码，当价值为基础，如7的速度，增加左缘不出现300px，但在294跳到301，导致失败的情况下，无法停止。
使用其他语句是为了防止停止动作，每次点击按钮，div就会移动一个速度。
计时器前，关闭计时器，防止连续点击按钮，同时打开多个计时器，使移动速度叠加的速度更快。

封装：
复制代码代码如下所示：
对象的ID指标水平位移的位置：被 / /对象移动：
var定时器= null；
函数MoveTo（对象、指标）{
var obj = document.getelementbyid（对象）；
ClearInterval（定时器）；
定时器= setInterval（）{（）函数（
var速度= 0；
如果（obj。offsetleft < ITarget）{ / /父对象距离裕度和水平位移判断位移方向
速度= 10；
其他{ }
速度= 10；
}
如果（obj。offsetleft = =指标）{
ClearInterval（定时器）；
其他{ }
Obj.style.left=obj.offsetLeft+speed+'px';
}；
}，30）；
}

实例2修改函数MoveTo（）上述包停止对象的变化

JS：
复制代码代码如下所示：
var定时器= null；
函数MoveTo（对象、指标）{
var obj = document.getelementbyid（对象）；
ClearInterval（定时器）；
定时器= setInterval（）{（）函数（
var速度= 0；
如果（obj。offsetleft < ITarget）{ / /位移除以10，速度下降，缓慢停止。乘以10是加速通过数字速度控制部。
速度=（指标对象。offsetleft） / 10；
其他{ }
速度= -（obj。offsetleft指标） / 10；
}
速度=速度> 0math.ceil（速度）：Math.floor（速度）； / /舍入，以1px解端位移被忽略
如果（obj。offsetleft = =指标）{
ClearInterval（定时器）；
其他{ }
obj。风格。左= obj。offsetleft +速度+ 'px；
}；
标题= obj.offsetleft文件；
}，30）；
}

主要点uff1a
（1）通过降低速度值来实现传输。
（2）当移动到最后，当像素小于1px，数值小于1px不会增加（或减少）的对象离开，但会被忽略，所以最终位移小于水平位移位置的指标。解决的方法是：数舍入取整上（细胞），负一楼（向下取整）。
膨胀：垂直位移的原理与水平位移相同。

补充1：
速度和指标的解决方案不可分割的，致使物体达不到指标的位置准确，但在其左右抖动。
复制代码代码如下所示：
var定时器= null；
函数MoveTo（对象、指标）{
var obj = document.getelementbyid（对象）；
ClearInterval（定时器）；
定时器= setInterval（）{（）函数（
var速度= 0；
如果（obj。offsetleft <= ITarget）{
速度= 7；
其他{ }
速度= 7；
}
设置 / /停止从指标距离目标位置移动的物体比速度，同时，设置对象直接移动到的位置留下指标。
如果（Math.abs（ITarget OBJ。offsetleft <=速度））{
ClearInterval（定时器）；
obj。风格。左=指标+ 'px；
其他{ }
obj。风格。左= obj。offsetleft +速度+ 'px；
}；
标题= obj.offsetleft文件；
}，30）；
}

补充2：

偏移的缺陷：例如，offsetwidth，既有宽度，而且填充和边框。当填充或帧设置为对象，对offsetwidth分配给对象，和运动是不同的。
解决方案：而不是抵消，而是offsetwidth通过创建一个函数，用IE和FF兼容，得到该元素的宽度属性值。这一功能如下：getattr（）
复制代码代码如下所示：
函数getattr（obj，attrname）{
var obj = document.getelementbyid（obj）；
如果（obj。currentstyle）{
返回的对象。currentstyle { attrname } / IE兼容；
其他{ }
返回getcomputedstyle（obj，false）{ attrname } / FF兼容；
}
}