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 相关文章推荐
IE php关于强制下载文件的代码
Aug 23 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
Vue数据绑定实例写法
Aug 06 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
详解CocosCreator消息分发机制
Apr 16 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
967 个函式
2006/10/09 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
隐性调用php程序的方法
2015/06/13 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
Javascript的构造函数和constructor属性
2010/01/09 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
python如何通过protobuf实现rpc
2016/03/06 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
《与朱元思书》的教学反思
2014/04/17 职场文书
工资收入证明
2014/10/07 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
廉政承诺书2015
2015/04/28 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书