加速运动，即一个物体运动时速度越来越快；减速运动，即一个物体运动时速度越来越慢。现在用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]
加速运动的示例演示及源码下载
注：本示例中，点击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]
减速运动的示例演示及源码下载
注：本示例中，点击GO后，div块会一直向右做减速运动，直到速度减为零后，速度变为负值，再向左做加速运动
相关推荐
主要介绍了Javascript加速运动与减速运动代码分享,需要的朋友可以参考下
主要介绍了JS实现匀加速与匀减速运动的方法,涉及javascript结合时间函数与数学运算动态操作页面元素样式的相关实现技巧,需要的朋友可以参考下
弹性运动实现原理：加速运动+减速运动+摩擦运动 运行效果截图如下： 实例代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <...
这个是我闲着无聊的时候写的。 用javascript实现。 模拟小物体从高空落下，加速，撞击地面，反弹，减速等的一系列过程。 供javascript初学者学习参考。 希望大家多多批评指正，共同进步。
本文实例讲述了javascript动画算法。分享给大家供大家参考。具体如下： 动画算法 Linear：无缓动效果(匀速运动)； Quadratic：二次方的缓动；...easeIn：从0开始加速的运动； easeOut：减速到0的运动；
315 7.4 时间轴扭曲运动 317 7.4.1 没有加速度的线性运动 319 7.4.2 逐渐加速的缓入运动 320 7.4.3 逐渐减速的缓出运动 322 7.4.4 缓入缓出运动 323 7.4.5 弹簧运动与弹跳运动 324 7.5 以扭曲后的帧速率播放...
所有伺服电机的速度控制，有助于平稳的加速和减速。 无阻塞串行解析，可远程控制机器人的运动。 使用分压器电路监控电池电量。 Raspberry Pi Web服务器（web_interface） Web界面使用Python编程，并使用Flask...
使用 raphael.js 进行绘图和 jquery-1.11.2.js #实现的功能： 直线运动： 加速到给定的速度减速到零一个物体赶上另一个显示实时信息弹丸： 普通的从地面出发斜面显示实时信息相对速度简单的 Vab 场景交叉路口的最近...
火箭轨迹可以由三个阶段组成——加速、匀速运动和减速。 有关更多信息，请参阅已发布的 html 帮助。 如果您已连接到 Internet，该 html 帮助将使用 MathJax javascript 来显示公式。 否则，它会退回到预先生成的 ...