加速运动，即一个物体运动时速度越来越快；减速运动，即一个物体运动时速度越来越慢。现在用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. LintCode——筛子求和

    描述:扔n个骰子,向上面的数字之和为 S .给定 Given n,请列出所有可能的 S 值及其相应的概率. 样例:给定n=1,返回 [ [1, 0.17], [2, 0.17], [3, 0.17], ...

  2. yocto-sumo源码解析（三）:oe-setup-builddir

    该脚本的主要功能就是创建构建目录并准备一些配置文件,比如conf/local.conf,conf/bblayer.conf 1. 检测BUILDDIR环境变量是否设置好(在本系列分享第二节已经知道:B ...

  3. Beta冲刺——day6

    Beta冲刺--day6 作业链接 Beta冲刺随笔集 github地址 团队成员 031602636 许舒玲(队长) 031602237 吴杰婷 031602220 雷博浩 031602134 王龙 ...

  4. PAT 甲级 1096 Consecutive Factors

    https://pintia.cn/problem-sets/994805342720868352/problems/994805370650738688 Among all the factors ...

  5. hdu 6315 Naive Operations （2018 Multi-University Training Contest 2 1007）

    Naive Operations Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 502768/502768 K (Java/Other ...

  6. Continuation-passing style

    Continuation-passing style 参考书籍: EOPL (  Essentials of Programming Languages, 3rd Edition ) 作者:知乎用户链 ...

  7. word默认字体与大小

    对于红色地方单击,“正文框”按右键+修改 修改字体大小 修改中文和西文时的字体 注意宋体和宋体 (中文正文)是不同的

  8. mybatis的面试一对一，一对多，多对多的mapper.xml配置

    使用springboot完成一对一,一对多: https://blog.csdn.net/KingBoyWorld/article/details/78966789 传统的mapper文件中的一对一, ...

  9. std::bind常见的坑

    http://note.youdao.com/noteshare?id=bce9cdea8e94501186b5ba3026af685f

  10. Hadoop生态圈-Azkaban实现文件上传到hdfs并执行MR数据清洗

    Hadoop生态圈-Azkaban实现文件上传到hdfs并执行MR数据清洗 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 如果你没有Hadoop集群的话也没有关系,我这里给出当时我 ...