javascript匀速运动实现方法分析


Posted in Javascript onJanuary 08, 2016

本文实例讲述了javascript匀速运动实现方法。分享给大家供大家参考,具体如下:

匀速运动步骤:

1. 清除定时器
2. 开启定时器
3. 运动是否完成:a、运动完成,清除定时器;b、运动未完成继续

匀速运动停止条件:距离足够近  Math.abs(当然距离-目标距离) < 最小运动距离

运行效果截图如下:

javascript匀速运动实现方法分析

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接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
vue双向绑定简要分析
Mar 23 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 Javascript
js如何改变文章的字体大小
Jan 08 #Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 #Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 #Javascript
基于javascript实现右下角浮动广告效果
Jan 08 #Javascript
jQuery数据类型小结(14个)
Jan 08 #Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 #Javascript
基于jquery实现图片上传本地预览功能
Jan 08 #Javascript
You might like
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
Python中变量交换的例子
2014/08/25 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
Python装饰器用法实例总结
2018/02/07 Python
python实现海螺图片的方法示例
2019/05/12 Python
使用python制作一个解压缩软件
2019/11/13 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
实例代码讲解Python 线程池
2020/08/24 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
存储过程和函数的区别
2013/05/28 面试题
电子商务专业实习生自我鉴定
2013/09/24 职场文书
博士学位自我鉴定范文
2013/12/26 职场文书
企业年会主持词
2014/03/27 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
教师节表彰会主持词
2015/07/06 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
MySQL中order by的使用详情
2021/11/17 MySQL
Java中API的使用方法详情
2022/04/06 Java/Android