加速运动，即一个物体运动时速度越来越快；减速运动，即一个物体运动时速度越来越慢。现在用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. vue.js指令总结

    1.v-html 用于输出真正html,而不是纯文本. 2.v-text 输出纯文本. <!DOCTYPE html> <html lang="en"> & ...

  2. 结巴分词python

    将文件中的txt文档依次读出 并分好词后 写入 另外的TXT中 #coding=utf-8 import os import jieba import codecs import random def ...

  3. 第二个Sprint计划

    第一个Sprint计划已完成基本框架,接着第二个计划 时间:5月30-6月3日 目标:能够将各个框架连接起来,实现基本功能,并查看数据库连接. 分工:杜殷浩:查看数据库连接,创建数据库. 何广强:实现 ...

  4. Smart Disk -- proposed by Liyuan Liu

    Need 如今,照相渐渐得成为了人们的日常举动.几乎所有的人都在随时随地得照相.手机,相机,平板越来越多的设备对照相进行了支持,同时, 照片以一种前所未有的速度渐渐淹没我们的文件夹.而寻找照片,对照片 ...

  5. 第十一周（11.24-12.01）----final评论II

    1.  Nice 项目:约跑软件 这款app非常实用.从性能上讲,这款软件基于Android开发.使用者只要注册就能实用,操作简便.在功能上,这款软件不仅为两个有意愿同时跑步的人牵线,为跑步的人提供跑 ...

  6. 使用kubeadm 离线安装 单master k8s 1.13

    Study From :https://www.kubernetes.org.cn/4948.html https://www.kubernetes.org.cn/4948.html 感谢原作者提供的 ...

  7. 【转帖】 redis 命令 From https://www.cnblogs.com/zhouweidong/p/7550717.html

    redis命令详解   redis中添加key value元素:set key value;       获取元素:get key ;   redis中添加集合:lpush key value1 va ...

  8. powershell远程管理服务器磁盘空间的实现代码

    一.启用远程管理 1.将管理服务器的trusthost列表改为* 运行Set-item wsman:localhostclienttrustedhosts ?value * 2.在远程服务器上运行En ...

  9. Java学习之静态代码块

    一.static(在方法区有一块固定的存储区域,由于优先于对象存在,所以可以被所有对象共享) 在定义方法的时候你写main方法的类加static, 写普通类的写方法的时候就不要加static 1.st ...

  10. BZOJ2744 HEOI2012朋友圈（二分图匹配）

    先考虑B国.容易发现a xor b mod 2=0即二进制末位相同,那么可以据此将所有人分成两部分,每一部分各自是一个完全图.然后再将a or b有奇数个1的边连上,现在需要求的就是这样一个图里的最大 ...