java模拟加速匀速减速_Javascript模拟加速运动与减速运动代码分享

2024-05-23 00:40:24

加速运动，即一个物体运动时速度越来越快；减速运动，即一个物体运动时速度越来越慢。现在用Javascript来模拟这两个效果，原理就是用setInterval或setTimeout动态改变一个元素与另外一个元素的距离，如xxx.style.left或xxx.style.marginLeft，然后每次运动后都使速度增加，这样加速运动的效果就出现了，减速运动是同样的道理。

下面是两个示例：

加速运动

Javascript加速运动

* {margin: 0; padding: 0;}

.div1 {width: 100px; height: 100px; background: #f60 url(qiuweiguan.gif) no-repeat center center;}

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);

}

}

GO

注：本示例中，点击GO后，div块会一直向右做加速运动

减速运动

Javascript减速运动

* {margin: 0; padding: 0;}

.div1 {width: 100px; height: 100px; background: #f60 url(qiuweiguan.gif) no-repeat center center;}

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);

}

}

GO

注：本示例中，点击GO后，div块会一直向右做减速运动，直到速度减为零后，速度变为负值，再向左做加速运动

java模拟加速匀速减速_Javascript模拟加速运动与减速运动代码分享相关推荐

java模拟加速匀速减速_Android学习之动画加速减速匀速控制
今天说一下新发现的一个类的使用: 网上很多都写了Interpolator,你们先了解一下.我主要是简单说怎么用. Android 动画之Interpolator插入器 --AccelerateInte ...
java模拟加速匀速减速_【JavaSE练习】面向对象_练习_模拟汽车的自动驾驶系统
[JavaSE练习]面向对象_练习_模拟汽车的自动驾驶系统 [JavaSE练习]面向对象_练习_模拟汽车的自动驾驶系统模拟汽车驾驶系统定义一个交通工具的类,包括: 属性:速度方法:设置速度,加速 ...
java模拟加速匀速减速_步进电机加速-匀速-减速运行程序(C51源程序)
ME300系列单片机开发系统+步进电机模块演示程序功能:步进电机以加速方式启动,转速达到程序规定的最快速度后保持一段时间匀速运转,又开始以减速方式运行直到步进电机停止转动.由K1键控制演示程序运行 ...
java模拟加速匀速减速_JS实现匀加速与匀减速运动的方法示例
本文实例讲述了JS实现匀加速与匀减速运动的方法.分享给大家供大家参考,具体如下: /* * 动画帧函数 * * */ var requestFrame=function(){ var prefixLi ...
java微信开发图文_JAVA微信开发总结的图文代码分享
最近研究了一下微信,感觉不是很难,借鉴了marker(www.yl-blog.com)的开源代码,修改了几处小BUG(在作者的开源网站上留了言,详见其开源网站),很快就实现关键的逻辑: 1.开发者验证 ...
(Java入门)面向对象思想模拟坦克开炮，加速，减速行为
用面向对象的思想编写一个应用程序,该程序有两个类:Tank类和Fight类. 要求:1.模拟坦克加速.减速 2.给定炮弹的数量,模拟开炮行为. 3 ...
【浅谈JAVA】1-创建汽车类模拟汽车行驶
JAVA创建汽车类模拟汽车行驶设计类-属性:尺寸(长宽高).品牌.时速.最高时速-函数:显示汽车状态.启动汽车.加速.减速.汽车行驶.主函数(程序启动入口并创建对象) 源码- 1.定义一个汽车类类通过 ...
java程序设计试题_《Java语言程序设计》期末考试模拟试题——填空题和编程题...
一.根据题意,填写出空格中的内容 Java平台包括三个技术方向,其中J2ME代表____________.J2SE代表___________.J2EE代表____________.2.面向对象的四大概 ...
蓝桥杯 Java B组省赛决赛模拟赛详解及小结汇总+题目下载【2013年(第4届)~2021年(第12届)】
蓝桥杯 Java B组省赛决赛模拟赛详解及小结汇总+题目下载[2013年(第4届)~2021年(第12届)] 百度网盘-CSDN蓝桥杯资料(真题PDF+其它资料) 提取码:6666 2013年 ...

最新文章

热门文章