JS实现匀速运动的代码实例
更新时间：2013年11月29日 16:45:42 作者：
这篇文章主要介绍了JS实现匀速运动的代码实例，有需要的朋友可以参考一下
效果：
思路：
利用setInerval()计时器，进行运动。然后关键的一点是在最后停止的时候给它一个填充缝隙的判断。
代码：
复制代码 代码如下:
<head runat="server">
<title></title>
<style type="text/css">
#div1
{
width: 100px;
height: 100px;
background: #0000FF;
position: absolute;
left: 800px;
top: 100px;
}
#div200
{
width: 1px;
height: 400px;
background: #FF0000;
position: absolute;
left: 200px;
}
#div500
{
width: 1px;
height: 400px;
background: #FF0000;
position: absolute;
left: 500px;
}
</style>
<script type="text/javascript">
function move(end) {
var oDiv = document.getElementById('div1');
var timer = null;
timer = setInterval(function () {
var speed = (end - oDiv.offsetLeft) / 5; //根据终点和offsetLeft取出运动的速度
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //进位取整，小数位变为整位，
// if (oDiv.offsetLeft <= end) {
// clearInterval(timer);
// }
// else {
// oDiv.style.left = oDiv.offsetLeft + speed + 'px';
// }
if (Math.abs(end - oDiv.offsetLeft) <= speed) { //由于在停止的时候最后会出现小的缝隙，或者说没有完全的到达指定地点，所以要小于它的速度
clearInterval(timer); //当距离小于速度时，让计时器停止
oDiv.style.left = end + 'px'; //在停止后填充缝隙。
}
else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px'; //移动DIV
}
}, 30)
}
</script>
</head>
<body>
<input type="button" id="btn1" value="到500的位置" onclick="move(500);" />
<input type="button" id="btn2" value="到200的位置" onclick="move(200);" />
<div id="div1">
</div>
<div id="div200">200
</div>
<div id="div500">500
</div>
</body>
相关文章
JavaScript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。2009-10-10
这篇文章主要介绍了微信小程序module.exports模块化操作,结合实例形式简单分析了module.exports模块化的定义与引用相关操作技巧与注意事项,需要的朋友可以参考下2018-12-12
这篇文章主要介绍了一篇文章搞定JavaScript类型转换(面试常见)，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-01-01
这篇文章主要介绍了浅谈webpack组织模块的原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家详细介绍了zTree插件下拉树使用入门教程，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了iconfont的三种使用方式,需要的朋友可以参考下2018-08-08
进程和线程都是计算机中的概念，用于描述程序执行时的运行单位。在 JavaScript 中，进程和线程的概念并不是直接暴露给开发者的，而是通过浏览器或 Node.js 等执行环境来实现的，文中介绍的非常详细，感兴趣的同学可以阅读一下2023-04-04
这篇文章主要给大家介绍了关于javascript删除数组元素的七个方法，文中通过示例代码介绍的非常详细，对大家学习或者使用javascript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
这篇文章主要为大家详细介绍了js编写选项卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
Django模板系统提供了一套丰富的工具集,能够帮助开发者将动态数据有效地渲染到HTML页面中,它通过特殊的语法支持变量插入、逻辑标签和过滤器的使用,本文给大家介绍Django 中的templates使用,感兴趣的朋友一起看看吧2024-10-10
最新评论