加速运动，即一个物体运动时速度越来越快；减速运动，即一个物体运动时速度越来越慢。现在用Javascript来模拟这两个效果，原理就是用setInterval或setTimeout动态改变一个元素与另外一个元素的距离，如xxx.style.left或xxx.style.marginLeft，然后每次运动后都使速度增加，这样加速运动的效果就出现了，减速运动是同样的道理。

下面是两个示例：

加速运动

[html]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript加速运动</title>
<style type="text/css">
* {margin: 0; padding: 0;}
.div1 {width: 100px; height: 100px; background: #f60 url(qiuweiguan.gif) no-repeat center center;}
</style>
<script type="text/javascript">
var $$ = function (id) {
return document.getElementById(id);
}

window.onload = function () {
var oBtn = $$("btn1");
var oDiv = $$("div1");
var timer = null;
var speed = 0;
oBtn.onclick = function () {
clearInterval(timer);
timer = setInterval(function () {
speed ++;
oDiv.style.marginLeft = oDiv.offsetLeft + speed + "px";
}, 30);
}
}
</script>
</head>
<body id = "body">
<button id="btn1" class="btn1">GO</button>
<div id="div1" class="div1"></div>
</body>
</html>

[/html]

加速运动的示例演示及源码下载

Demo 　     Download

注：本示例中，点击GO后，div块会一直向右做加速运动

减速运动

[html]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript减速运动</title>
<style type="text/css">
* {margin: 0; padding: 0;}
.div1 {width: 100px; height: 100px; background: #f60 url(qiuweiguan.gif) no-repeat center center;}
</style>
<script type="text/javascript">
var $$ = function (id) {
return document.getElementById(id);
}

window.onload = function () {
var oBtn = $$("btn1");
var oDiv = $$("div1");
var timer = null;
var speed = 30;
oBtn.onclick = function () {
clearInterval(timer);
timer = setInterval(function () {
speed — ;
oDiv.style.marginLeft = oDiv.offsetLeft + speed + "px";
}, 30);
}
}
</script>
</head>
<body id = "body">
<button id="btn1" class="btn1">GO</button>
<div id="div1" class="div1"></div>
</body>
</html>

[/html]

减速运动的示例演示及源码下载

Demo 　     Download

注：本示例中，点击GO后，div块会一直向右做减速运动，直到速度减为零后，速度变为负值，再向左做加速运动

Javascript加速运动与减速运动的更多相关文章

  1. javascript加速运动

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. javascript按键盘上/右/下/左箭头加速运动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. javascript运动系列第二篇——变速运动

    × 目录 [1]准备工作 [2]加速运动 [3]重力运动[4]减速运动[5]缓冲运动[6]加减速运动[7]往复运动[8]变速函数 前面的话 前面介绍过匀速运动的实现及注意事项,本文在匀速运动的基础上, ...

  4. Android属性动画完全解析(下)

    转载:http://blog.csdn.net/guolin_blog/article/details/44171115 大家好,欢迎继续回到Android属性动画完全解析.在上一篇文章当中我们学习了 ...

  5. canvas学习笔记：小小滴公式，大大滴乐趣

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 最近想弄一个网页,把自己学HTML5过程中做的部分DEMO放上去做集合,但是,如果就仅仅做个网页把所有DEMO一个一个排列又觉得太难看了. ...

  6. Android属性动画完全解析(上)

    Android属性动画完全解析(上) 转载:http://blog.csdn.net/guolin_blog/article/details/43536355 在手机上去实现一些动画效果算是件比较炫酷 ...

  7. 从零开始学习前端开发 — 15、CSS3过渡、动画

    一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...

  8. Android属性动画完全解析(下)，Interpolator和ViewPropertyAnimator的用法

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/44171115 大家好,欢迎继续回到Android属性动画完全解析.在上一篇文章当中 ...

  9. 自定义Interpolator

    nterpolator这个东西很难进行翻译,直译过来的话是补间器的意思,它的主要作用是可以控制动画的变化速率,比如去实现一种非线性运动的动画效果.那么什么叫做非线性运动的动画效果呢?就是说动画改变的速 ...

随机推荐

  1. Java收发邮件过程中具体的功能是怎么实现的

    SMTP协议 用户连上邮件服务器后,要想给它发送一封电子邮件,需要遵循一定的通迅规则,SMTP协议就是用于定义这种通讯规则的. 因而,通常我们也把处理用户smtp请求(邮件发送请求)的邮件服务器称之为 ...

  2. Arcengine效率探究之二——属性的更新(转载)

    http://blog.csdn.net/lk103852503/article/details/6570748 修改一批要素的属性有多种方法,当数据量较大时,若选择不当可能会大大影响速度. 一.IR ...

  3. 关于Backbone和Underscore再说几点

    1. Backbone本身没有DOM操作功能,所以我们需要导入JQuery/Zepto/Ender 2. Backbone依赖于underscore.js: http://documentcloud. ...

  4. JavaMail实现邮箱之间发送邮件功能

    package com.minstone.message.util; import java.util.Date; import java.util.Properties; import javax. ...

  5. 集美大学1414班软件工程个人作业2——个人作业2：APP案例分析

    一.作业链接 个人作业2:APP案例分析 二.博文要求 通过分析你选中的产品,结合阅读<构建之法>,写一篇随笔,包含下述三个环节的所有要求.  第一部分 调研, 评测 下载软件并使用起来, ...

  6. pandas读取csv数据时设置index

    比如读取数据时想把第一列设为index,那么只需要简单的 pd.read_csv("new_wordvecter.csv",index_col=[0]) 这里index_col可以 ...

  7. Java认识对象

    一.类与对象 java中有基本类型和类类型两个类型系统.Java撰写程序几乎都在使用对象,要产生对象必须先定义类,类是对象的设计图,对象是类的实例 1.定义类 类定义使用的关键词为class,建立实例 ...

  8. anaconda的spyder打不开

    因为最近一段时间没有用Spyder,今天使用时,发现Spyder又又打不开了. 之前遇到Spyder打不开的情况时,是根据这里的教程:删除.matplotlib和.spyder两个文件,但这次删除这两 ...

  9. BZOJ4559 JLOI2016成绩比较（容斥原理+组合数学+斯特林数）

    容斥一发改为计算至少碾压k人的情况数量,这样对于每门课就可以分开考虑再相乘了.剩下的问题是给出某人的排名和分数的值域,求方案数.枚举出现了几种不同的分数,再枚举被给出的人的分数排第几,算一个类似斯特林 ...

  10. GCD LCM UVA - 11388 (思维。。水题）

    两个数的最小公倍数和最大公约数肯定是倍数关系 然后又让求使得a最小  因为 a = m * gcd 令m = 1 时 a取得最小  即gcd 则b = lcm #include <iostrea ...