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 相关文章推荐
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
jquery高级编程的最佳实践详解
Mar 23 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 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
mysql时区问题
2008/03/26 PHP
PHP 开源框架22个简单简介
2009/08/24 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
php中JSON的使用方法
2015/04/30 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
Python基于twisted实现简单的web服务器
2014/09/29 Python
python编码最佳实践之总结
2016/02/14 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
基于python生成器封装的协程类
2019/03/20 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
python 调试冷知识(小结)
2019/11/11 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
Django values()和value_list()的使用
2020/03/31 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
python 实现客户端与服务端的通信
2020/12/23 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
广播体操口号
2014/06/18 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
召开会议通知范文
2015/04/15 职场文书
采购员工作总结范文
2015/08/12 职场文书
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript