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

<!DOCTYPE HTML>

<!--

-->

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

#div1{

	width:200px;

	height:200px;

	background:red;

	position:absolute;//不加绝对定位，就跑不起来

	top:50px;

	left:0px;

}

</style>

<script>

var timer=null;

function startMove(){

	var oDiv=document.getElementById('div1');	

	clearInterval(timer);//保证仅仅有一个定时器在工作，不会由于连续点击多次按钮而开启多个定时器，从而导致速度变快

	timer=setInterval(function (){

	var speed=1;

	if(oDiv.offsetLeft>=300)//大于300时让物体停在那里，不一直运动下去

	{

		clearInterval(timer);

	}

	else

	{

		oDiv.style.left=oDiv.offsetLeft+speed+'px';

	}

	},30)

}

</script>

</head>

<body>

	<input id="btn1" type="button" value="開始运动" onclick="startMove()"/>

	<div id="div1"></div>

</body>

</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. Hibernate自增列保存失败的问题

    author: hiu 更正说明:今天(2014-07-07)才发现的问题,我把@Id设置在了实体类中的id中,@Id是主键,应该设置在实体类的keyjobno中,之前发的文章可能误导了大家,如今更正 ...

  2. HDU 5274(树链剖分）

    树链剖分第一题QAQ,纪念下 #pragma comment(linker, "/STACK:102400000,102400000") #include <iostream ...

  3. JavaScript学习笔记之 数组方法一 堆栈 和队列

    数组的方法 以及 堆栈的操作的方法 JavaScript是一种弱类型语言,不像其它程序语言需要严格定义数据类型.在JavaScript中数组可以任意修改变动,这样也就出现了一个问题,如果边遍历数组边操 ...

  4. webform 验证控件

    验证: 一.非空验证  RequiredFieldValidator ErrorMessage - 验证出错后的提示信息 ControlToValidate - 要验证的控件的ID Display - ...

  5. android 开发中判断网络是否连接的代码

    在android的开发中,尤其是与访问网络有关的开发,都要判断一下手机是否连接上了网络,下面是一个判断是否连接网络的嗲吗片段: package cn.com.karl.util; import com ...

  6. SharpZipLib 压缩文档下载

    using ICSharpCode.SharpZipLib.Zip; Response.Clear(); Response.ClearContent(); Response.ClearHeaders( ...

  7. 转载：struts标签<s:date>的使用

    转载网址:http://blog.sina.com.cn/s/blog_510fdc8b01010vjx.html s truts 标签 :<s:date/>作用:用来格式化显示日期的格式 ...

  8. CC2530定时器1的模模式中断

    CC2530定时器1的模模式中断void timer1SInit(void){ T1CCTL0 = 0; T1CTL &= ~0x0F; //clear register T1CTL |= 0 ...

  9. 异步编程设计模式Demo - PrimeNumberCalculator

    using System; using System.Collections; using System.Collections.Specialized; using System.Component ...

  10. DSASync: Managing End-to-End Connections in Dynamic Spectrum Access Wireless LANs

    其实跟上一篇是同一篇文章.不过上一篇是发表在IEEE Secon2010了,这篇是后来又增加了部分内容后的一版,收录在IEEE/ACM TRANSACTIONS ON NETWORKING, VOL. ...