基本思路：样式要是绝对定位，不然的话根本走不起来。当开启一个定时器的时候。必须先清除定时器。这是为了防止鼠标连续点击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. android layout属性介绍

    android:id 为控件指定对应的ID android:text 指定控件其中显示的文字,须要注意的是,这里尽量使用strings.xml文件其中的字符串 android:gravity 指定Vi ...

  2. Android无法导入下载好的项目（和Eclipse中已经存在的项目命名一样导致冲突）解决办法

    错误提示: 在我们到导入从网络下载的项目时,经常会出现如下问题(选择的项目变灰,并且提示要选择至少一个项目): 错误原因: 出现这样的错误主要是因为你的Eclipse已经存在了和上图中New Proj ...

  3. bat处理文件

    bat处理文件 作用:可以一次性执行多个命令的文件. 为什么要学bat处理文件? 快速运行一个软件一般都会把软件打包一个jar包,但是jar双击可以运行仅对图形化界面的软件起作用,对于控制台的程序是不 ...

  4. linux提取指定行至指定位置

    grep查找ERROR,定位位置 awk打印到指定行数 sed打印到文本末尾 awk打印到文本末尾 方法一 #!/bin/csh -f if(-f errorlog.rpt) then rm -rf ...

  5. HTML与CSS入门——第八章 使用外部和内部链接

    知识点: 1.链接锚的使用方法 2.在自己的网站上的页面之间链接的方法 3.链接到外部内容的方法 4.链接到一个E-mail地址的方法 5.在新浏览器窗口中查看链接的方法 6.用CSS为链接添加样式的 ...

  6. linux下mysql环境支持中文配置步骤

    sql脚本执行前加上: CREATE DATABASE IF NOT EXISTS mydatabase DEFAULT CHARSET utf8 COLLATE UTF8_GENERAL_CI; u ...

  7. 1、Spark 通过api，hfile两种形式获取hbase数据，简单样例

    pom内容: <dependency> <groupId>org.apache.hbase</groupId> <artifactId>hbase-se ...

  8. java-web-dom4j解析XML-递归方式

    <?xml version="1.0" encoding="UTF-8"?><书架>  <书 出版日期="2013-10 ...

  9. phantomjs 渲染

    phantomjs 可以将web页面渲染并保存为扩展名为PNG,GIF,JPEG,PDF的指定文件 render viewportSize可以改变可视窗体大小 zoomFactor调整缩放比例 cli ...

  10. Python基础第四天

    必须掌握的内置函数 bytes() divmod() eval() exec() isinstance() range() 常用函数 1.数学相关 abs(x) abs()返回一个数字的绝对值.如果给 ...