javascript匀速运动实现方法分析
更新时间：2016年01月08日 11:39:25 作者：lostyu
这篇文章主要介绍了javascript匀速运动实现方法,结合实例形式分析了JavaScript匀速运动的具体实现步骤与相关注意事项,需要的朋友可以参考下
本文实例讲述了javascript匀速运动实现方法。分享给大家供大家参考，具体如下：
匀速运动步骤：
1. 清除定时器
2. 开启定时器
3. 运动是否完成：a、运动完成，清除定时器；b、运动未完成继续
匀速运动停止条件：距离足够近 Math.abs(当然距离-目标距离) < 最小运动距离
运行效果截图如下：
div的匀速运动（简单运动）示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript匀速运动</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:500px;}
span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;}
</style>
<script>
window.onload = function()
{
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn.onclick = function()
{
startMove(oDiv, 300);
};
};
var timer = null;
function startMove(obj, iTarget)
{
clearInterval(timer);
timer = setInterval(function(){
var iSpeed = 0;
if(obj.offsetLeft < iTarget)
{
iSpeed = 7;
}
else
{
iSpeed = -7;
}
if( Math.abs( obj.offsetLeft - iTarget ) < 7 )
{
clearInterval(timer);
obj.style.left = iTarget + 'px';
}
else
{
obj.style.left = obj.offsetLeft + iSpeed + 'px';
}
}, 30);
}
</script>
</head>
<body>
<button id="btn1">移动</button>
<div id="div1"></div>
<span></span>
</body>
</html>
更多关于JavaScript运动效果相关内容可查看本站专题：《JavaScript运动效果与技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
JavaScript设计模式---单例模式详解【四种基本形式】
这篇文章主要介绍了JavaScript设计模式---单例模式,结合实例形式详细分析了JavaScript设模式中单例模式的四种基本形式定义与使用方法,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了JS实现表格数据各种搜索功能的方法,可实现忽略大小写,模糊搜索,多关键搜索等功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了基于javascript实现tab选项卡切换特效调试笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-03-03
数据包围着我们。虽然搜索引擎和其他应用都对基于文本方式表示的数据偏爱有加，但人们发现可视化是更容易理解的一种方式。今年初，SitePoint 发表了 Aurelio 的文章《 Chart.js简介》。在深入研究 Chart.js 的功能后，本文将会讲解这篇简介的一些重点。2015-10-10
这篇文章主要介绍了js循环li添加点击事件 （闭包的应用）的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-12-12
这篇文章主要介绍了微信小程序学习总结（一）项目创建与目录结构,总结分析了微信小程序项目创建、配置方法以及目录结构、文件功能,需要的朋友可以参考下2020-06-06
这篇文章主要介绍了微信小程序下拉框功能的实例代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
闭包和垃圾回收机制常常作为前端学习开发中的难点,也经常在面试中遇到这样的问题,这篇文章主要介绍了JavaScript垃圾回收与闭包的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-04-04
这篇文章主要为大家介绍了uniapp实现滚动触底加载项目实战方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-09-09
这篇文章主要介绍了浅谈Javascript如何实现匀速运动的方法及相关代码,需要的朋友可以参考下2014-12-12
最新评论