加速运动，即一个物体运动时速度越来越快；减速运动，即一个物体运动时速度越来越慢。现在用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. SCRUM 12.14

    由于最近的课业较多,大家平时有些力不从心,对于工作完成得有限. 最近课业压力小了一些,我们决定从今天起,投入精力. 以下为我们的任务分配情况: 人员 任务 高雅智 清除缓存 彭林江 统计活跃用户数量 ...

  2. Ubuntu 14.04 installation & bugs on Alienware-13

    列一下Alienware 13笔记本配置: Processor: Intel Core 5th Generation i5-5200U Processor (3M Cache, up to 2.70 ...

  3. Xshell登录Docker

    使用SSH协议登录即可,用户名为docker,密码为tcuser

  4. idea 导入项目后不能执行main方法

    点击右键,出来不能run/debug 项目分为多个mouel模块,很多模块进来后在idea中丢失了(暂时不知道原因) 我们需要做的就是把丢失的模块加进来 ctrl+alt+shift+s 快捷键  或 ...

  5. 免费SSL证书(https网站)申请

    如何拥有一个自己的免费的SSL证书,并且能够长期拥有.这篇文章让你找到可用的免费证书o(*￣︶￣*)o 各厂商提供的免费SSL基本是Symantec(赛门铁克),申请一年,不支持通配符,有数量限制. ...

  6. javaee, javaweb和javase的区别以及各自的知识体系

    javaee, javaweb和javase的区别以及各自的知识体系 来源 https://blog.csdn.net/weixin_39297312/article/details/79454642 ...

  7. 【刷题】BZOJ 4000 [TJOI2015]棋盘

    Description Input 输入数据的第一行为两个整数N,M表示棋盘大小.第二行为两个整数P,K, 表示攻击范围模板的大小,以及棋子在模板中的位置.接下来三行, 每行P个数,表示攻击范围的模版 ...

  8. USACO Section 2.1 The Castle 解题报告

    题目 题目描述 有一个城堡,城堡中有若干个房间,房间与房间之间用墙来进行分隔.现在我们需要统计这个城堡有多少个房间,并且还要找出最大的房间的面积是多少(一个单元格就代表一个单元面积).城堡的主人现在想 ...

  9. 洛谷 P1412 经营与开发 解题报告

    P1412 经营与开发 题目描述 \(4X\)概念体系,是指在\(PC\)战略游戏中一种相当普及和成熟的系统概念,得名自4个同样以"\(EX\)"为开头的英语单词. \(eXplo ...

  10. 【bzoj3132】 Sdoi2013—森林

    http://www.lydsy.com/JudgeOnline/problem.php?id=3123 (题目链接) 题意 给出$n$个点的森林,每个点有一个非负点权,$m$个操作.连接两个点,查询 ...