基本思路：样式要是绝对定位，不然的话根本走不起来。当开启一个定时器的时候。必须先清除定时器。这是为了防止鼠标连续点击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. .NET基础拾遗（3）字符串、集合和流3

    三.流和序列化 3.1 流概念及.NET中常见流 无论什么信息,文字,声音,图像,只要进入了计算机就都被转化为数字,以数字方式运算.存储.由于计算机中使用二进制运算,因此数字只有两个:0 与 1,就是 ...

  2. 获取Excel表中各个Sheet的方法

    获取Excel表中各个Sheet的方法 private void simpleButton2_Click(object sender, EventArgs e) { OfdBOM.Filter = & ...

  3. css布局详解（一）——盒模型

    一.网页布局的几种情况 今天让我们总结一下在css布局的各种情况做一个总结,为我们以后布局网页时做一个参考. 先看一张图,这是去年cssConf大会时阿里的 @寒冬winter 老师放出来的: 如图所 ...

  4. HTML5 prefetch即预加载

    原文地址 声明:此文带着自己的理解,不完全按原文翻译 prefetch 即预加载,在用户需要前我们就将所需的资源加载完毕. 有了浏览器缓存,为何还需要预加载? 用户可能是第一次访问网站,此时还无缓存 ...

  5. 设置c#windows服务描述及允许服务与桌面交互的几种方法（转）

    方法一: 在ProjectInstaller.cs重写 install() ,Uninstall()方法 public override void Install(IDictionary stateS ...

  6. Tomcat6+nginx集群，达到负载均衡和session复制

    nginx+tomcat做web项目集群,达到负载均衡.故障转移.session复制功能. 1.nginx配置文件见上一篇“nginx配置文件(反向代理+集群+动静分离)” 2.tomcat集群,修改 ...

  7. 关于发布DIPS的MVC项目的IIS 7.0环境配置的方法

    本人技术笨拙,今天在发布DIPS的MVC4.0项目,并部署到IIS上,遇到各种问题.在查询相关资料后,最终得以解决,所以想把这个过程记录下来. 注:DIPS为一种非关系型数据库 首先,需要安装和注册D ...

  8. HDU 4612 （13年多校第二场1002）无向图缩点，有重边

    这道题是多校的题,比赛的时候是一道纷纷水过的板刷题. 题意:给你一些无向边,只加一条边,使该图的桥最少,然后输出最少的桥. 思路:当时大致想到思路了,就是缩点之后找出最长的链,然后用总的桥数减去链上的 ...

  9. js中的console

    console.log 是我们在调试代码的时候经常用到的一个方法,也可能也是很多人用的关于console的唯一方法,其实console对象下有很多不错的方法,现在记录总结于此.   log.info. ...

  10. a标签加绝对定位在图片上面，a的链接和块状属性block失效,而且是所有IE版本都失效的

    谷歌和火狐浏览器下测试是正常的,IE下鼠标移过logo是没有超链接的提示的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...