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 相关文章推荐
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
jQuery EasyUi 验证功能实例解析
Jan 06 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
JS中promise化微信小程序api
Apr 12 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 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
PHP 开发工具
2006/12/06 PHP
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
golang与PHP输出excel示例
2016/07/22 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
vue组件学习教程
2017/09/09 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
Python调用服务接口的实例
2019/01/03 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
Python接口测试文件上传实例解析
2020/05/22 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
线程同步的方法
2016/11/23 面试题
自荐书4要点
2014/01/25 职场文书
致100米运动员广播稿
2014/02/14 职场文书
党员承诺书格式
2014/05/21 职场文书
小学工作总结2015
2015/05/04 职场文书