基本思路：样式要是绝对定位，不然的话根本走不起来。当开启一个定时器的时候。必须先清除定时器。这是为了防止鼠标连续点击button而开启多个定时器，导致物体的速度加快等原因，其次要控制好物体的运动和停止。用if-else控制逻辑控制。

  1. <!DOCTYPE HTML>
  2. <!--
  3.  
  4. -->
  5. <html>
  6. <head>
  7. <meta charset="utf-8">
  8. <title></title>
  9. <style>
  10. #div1{
  11. 	width:200px;
  12. 	height:200px;
  13. 	background:red;
  14. 	position:absolute;//不加绝对定位，就跑不起来
  15. 	top:50px;
  16. 	left:0px;
  17. }
  18.  
  19. </style>
  20.  
  21. <script>
  22. var timer=null;
  23. function startMove(){
  24. 	var oDiv=document.getElementById('div1');	
  25.  
  26. 	clearInterval(timer);//保证仅仅有一个定时器在工作，不会由于连续点击多次按钮而开启多个定时器，从而导致速度变快
  27. 	timer=setInterval(function (){
  28. 	var speed=1;
  29.  
  30. 	if(oDiv.offsetLeft>=300)//大于300时让物体停在那里，不一直运动下去
  31. 	{
  32. 		clearInterval(timer);
  33. 	}
  34. 	else
  35. 	{
  36. 		oDiv.style.left=oDiv.offsetLeft+speed+'px';
  37. 	}
  38.  
  39. 	},30)
  40.  
  41. }
  42. </script>
  43. </head>
  44. <body>
  45. 	<input id="btn1" type="button" value="開始运动" onclick="startMove()"/>
  46. 	<div id="div1"></div>
  47.  
  48. </body>
  49. </html>

效果图：

（36）JS运动之使物体向右运动的更多相关文章

  1. （42）JS运动之多物体框架--多个div变宽

    假设仅仅为div加入一个定时器的话.在多个div变宽的时候会发生故障.可是假设为每一个div加入一个定时器.那么就能够实现多个物体变宽. 注意:在多物体运动的情况下,全部东西不能共用.offsetXX ...

  2. js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  3. JavaScript学习总结【11】、JS 运动

    动画效果在网站中是一种非常常见的交互式体验效果,比如侧边栏分享.图片淡入淡出,我们把这种动画效果就叫做运动,也就是让物体动起来.如果想让一个物体动起来,无非就是改变它的速度,也就是改变属性值,比如 l ...

  4. 第八节 JS运动基础

    运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...

  5. JS运动从入门到兴奋1

    hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌 ...

  6. JS运动从入门到精髓！哈哈

    首先来看最基础的运动:单个物体向右匀速运动到某一点停止      例子:一个按钮,一个div,点击按钮,让div向右运动到某一个位置暂停 // 原理: 1 获取物体当前的位置 oDiv.offsetl ...

  7. js运动框架逐渐递进版

    运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...

  8. 解析JS运动

    解析JS运动 物体运动原理:通过改变物体的位置,而发生移动变化. 任何运动都是相对的,就像物理中的运动公式:s(要达到的)=s0(当前的样式值)+vt. 方法:      1.运动的物体使用绝对定位 ...

  9. js运动动画

    原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...

随机推荐

  1. [Regular Expressions] Find Repeated Patterns

    Regular Expression Quantifiers allow us to identify a repeating sequence of characters of minimum an ...

  2. sqlite创建数据库问题

    1.<Sqlite权威指南>上说是这么创建数据库的: sqlite3 test.db 但是我写了这条语句之后出现了下面的情况(注:安装Sqlite过程见 ...) 我的sqlite3放在 ...

  3. C# Linq Group By 多个字段并返回给实体类List

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace stud ...

  4. C/C++中的隐式类型转换

    代码: #include <iostream> #include <cstdio> using namespace std; int main(int argc,char* a ...

  5. Android 多渠道打包，上百渠道，秒打签名

    具体工具参见:https://github.com/hpu-spring87/MultiSignTools

  6. php array_combine 把array的默认键改成指定的字符串

    array(2) { [0] => array(6) { [0] => string(1) "1" [1] => string(10) "1470650 ...

  7. PHP数组foreach后使用current取值的问题

    先看如下的代码 $arr=['a','b','c']; foreach ($arr as $v){ echo $v.'<br>'; } var_dump(current($arr)); 今 ...

  8. 在子jsp页面中调用父jsp中的function或父jsp调用子页面中的function

    项目场景: A.jsp中有一个window,window里嵌入了一个<iframe>,通过<iframe>引入了另一个页面B.jsp.在B.jsp中的一个function中需要 ...

  9. python 画正弦曲线

    要画正弦曲线先设定一下x的取值范围,从0到2π.要用到numpy模块. numpy.pi 表示π numpy.arange( 0 , 2π ,0.01)  从0到2π,以0.01步进. 令 x=num ...

  10. 每次从vss获取文件都是只读

    在 Visual Studio 2008 中,使用 VSS 作为源码管理器,把文件签入后,文件会自动变为只读状态.在公司习惯是在某个开发人员的机器上获取最新的代码后编译,编译完之后服务器上再从 VSS ...