Javascript模拟加速运动与减速运动代码分享
作者：hebedich 时间：2024-06-07 15:27:46
加速运动，即一个物体运动时速度越来越快；减速运动，即一个物体运动时速度越来越慢。现在用Javascript来模拟这两个效果，原理就是用setInterval或setTimeout动态改变一个元素与另外一个元素的距离，如xxx.style.left或xxx.style.marginLeft，然后每次运动后都使速度增加，这样加速运动的效果就出现了，减速运动是同样的道理。
下面是两个示例：
加速运动
<!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>
注：本示例中，点击GO后，div块会一直向右做加速运动
减速运动
<!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>
注：本示例中，点击GO后，div块会一直向右做减速运动，直到速度减为零后，速度变为负值，再向左做加速运动
标签：Javascript,加速运动,减速运动
0
投稿猜你喜欢
Pytorch随机数生成常用的4种方法汇总
2022-02-07 09:25:34
nestjs实现图形校验和单点登录的示例代码
2024-04-16 09:49:08
为什么要进行CSS缩写？
2007-10-29 12:56:00
Python 字符串类型列表转换成真正列表类型过程解析
2021-07-28 18:06:52
Python实战之markdown转pdf(包含公式转换)
2023-11-24 12:39:34
python通过apply使用元祖和列表调用函数实例
2021-02-18 03:18:32
通过实例学习Python Excel操作
2021-01-21 21:55:12
Pycharm Plugins加载失败问题解决方案
2023-12-28 22:28:49
Python+Tkinter制作猜灯谜小游戏
2021-09-24 19:43:17
基于PyQt5制作一个PDF文件合并器
2023-04-27 07:50:58
SQL Server 2000安装故障
2008-01-22 19:10:00
uploadify在Firefox下丢失session问题的解决方法
2024-02-27 01:33:31
MySQL插入时间差八小时问题的解决方法
2024-01-28 22:00:09
Django自定义分页效果
2023-12-06 00:09:04
关于 MediaPlayer 播放器参数详解
2008-08-10 18:33:00
xhtml有哪些块级元素
2009-12-06 11:58:00
python中stdout输出不缓存的设置方法
2023-03-08 10:23:15
python字符串连接方式汇总
2021-08-19 23:46:14
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2023-09-24 00:11:25
python实现在内存中读写str和二进制数据代码
2022-03-30 04:55:11