Javascript模拟加速运动与减速运动代码分享


Posted in Javascript onDecember 11, 2014

加速运动,即一个物体运动时速度越来越快;减速运动,即一个物体运动时速度越来越慢。现在用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 相关文章推荐
JavaScript 比较时间大小的代码
Apr 24 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 Javascript
React实现动效弹窗组件
Jun 21 Javascript
javascript中HTMLDOM操作详解
Dec 11 #Javascript
javascript实现修改微信分享的标题内容等
Dec 11 #Javascript
javascript表单验证和Window详解
Dec 11 #Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 #Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 #Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 #Javascript
node.js中的buffer.slice方法使用说明
Dec 10 #Javascript
You might like
php字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
Python常用随机数与随机字符串方法实例
2015/04/09 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
Python编程中的文件操作攻略
2015/10/16 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
linux面试题参考答案(4)
2013/01/28 面试题
乌鸦喝水教学反思
2014/02/07 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
销售顾问岗位职责
2014/02/25 职场文书
土地转让协议书
2014/04/15 职场文书
爱护公共设施标语
2014/06/24 职场文书
长城的导游词
2015/01/30 职场文书
行政文员岗位职责
2015/02/04 职场文书
党小组评议意见
2015/06/02 职场文书
Golang数据类型和相互转换
2022/04/12 Golang