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的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 Javascript
js实现3D旋转相册
Aug 02 Javascript
vue实现折线图 可按时间查询
Aug 21 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 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边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
JavaScript知识点整理
2015/12/09 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
为Python程序添加图形化界面的教程
2015/04/29 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
医科大学生毕业的自我评价分享
2013/11/12 职场文书
装修五一活动策划案
2014/01/23 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
留学推荐信怎么写
2015/03/26 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
gateway网关接口请求的校验方式
2021/07/15 Java/Android
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
浅谈Vue的computed计算属性
2022/03/21 Vue.js