java计算加速减速_Javascript加速运动与减速运动

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

下面是两个示例:

加速运动

[html]

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

[/html]

加速运动的示例演示及源码下载

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

减速运动

[html]

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

[/html]

减速运动的示例演示及源码下载

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/486352.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python 运维包_基础入门_Python-模块和包.运维开发中__import__动态导入最佳实践?

常规导入:import module_name[,module1,...]from module_name import [*|child[,child1,...]from module_name import [*|child[,child1,...] as alias_name注意: 导入语句可出现在程序任意位置,自定义包要实现from module_name import *的效果则此模块必须在__init__.py实现__…

华为宣布出售荣耀,声明来了

来源:澎湃新闻综合华为官网、《深圳特区报》今天,华为发表声明,整体出售荣耀业务资产。对于交割后的荣耀,华为不占有任何股份,也不参与经营管理与决策。11月17日一早,荣耀最终的出售方案公布。多家企业在《…

Node.js教程-mysql模块

概述 在Node.js中,mysql模块是实现MySQL协议的JavaScript客户端工具。Node.js程序通过与MySQL建立链接,然后可对数据进行增、删、改、查等操作。 安装 由于mysql模块不是Node.js内置模块,需手动安装 npm i mysql注意:若MySQL服…

java 几种引用类型_Java 四种引用类型总结-Fun言

1. Java引用介绍Java从1.2版本开始引入了4种引用,这4种引用的级别由高到低依次为:强引用 > 软引用 > 弱引用 > 虚引用⑴ 强引用(Strong Reference)强引用是使用最普遍的引用,也是赋值的默认引用。如果一个对象具有强引用&…

JS运算符类型

一、运算符类型 1、算术运算符&#xff1a;用于各类数值运算&#xff0c;包括加()、减(-)、乘(*)、除(/)、求余(或称模运算&#xff0c;%)、自增()、自减(--)共七种。2、关系运算符&#xff1a;用于比较运算。包括大于&#xff08;>&#xff09;、小于&#xff08;<&…

python关于字符串的内置函数_Python 字符串内置函数(二)

# 2.格式化相关# ljust(width) 函数 获取固定长度&#xff0c;左对齐&#xff0c;右边不够用空格补齐# rjust(width) 函数 获取固定长度&#xff0c;右对齐&#xff0c;左边不够用空格补齐# center(width) 函数 获取固定长度&#xff0c;中间对齐&#xff0c;两边不够用空格补齐…

边缘计算4.0正急速驶来,你做好准备了吗?

物联网智库 整理发布导 读近十年间&#xff0c;各行各业的企业都经历着数字化技术和产品对传统生产经营模式的冲击。人工智能、大数据、区块链、自动化等技术的日渐完善&#xff0c;让企业的生产效率和业务模式发生了翻天覆地的变化。

java中for的常规用法_Java for循环的几种用法详解

本文非常适合初学Java的程序员&#xff0c;主要是来了解一下Java中的几种for循环用法&#xff0c;分析得十分详细&#xff0c;一起来看看。J2SE 1.5提供了另一种形式的for循环。借助这种形式的for循环&#xff0c;可以用更简单地方式来遍历数组和Collection等类型的对象。本文介…

运维-替换-修改kibana徽标

作为一名纯运维人员&#xff0c;想更改kibana的徽标。 并不能像开发一样去看源码并修改源码。 所以我们可以替换徽标。 先来一个效果图。我的版本是5.5.1。 具体的修改过程&#xff1a; 在kibana安装路径下面。 optimize/bundles/ 0cebf3d61338c454670b1c5bdf5d6d8d.svg 这…

python中的变量的作用_Python中的变量作用域

python中变量作用域包括&#xff1a;L (Local) 局部作用域&#xff0c;函数内部声明但没有使用global的变量E (Enclosing) 闭包函数外的函数中&#xff0c;def或者lambda的本地作用域G (Global) 全局作用域&#xff0c;函数中使用global声明的变量或在模块层声明的变量B (Built…

欧拉公式——真正的宇宙第一公式

来源&#xff1a;数学中国欧拉公式是数学里最令人着迷的公式之一&#xff0c;它将数学里最重要的几个常数联系到了一起&#xff1a;两个超越数&#xff1a;自然对数的底e&#xff0c;圆周率π&#xff1b;两个单位&#xff1a;虚数单位i和自然数的单位1&#xff0c;以及数学里常…

SpringBoot入门篇--整合mybatis+generator自动生成代码+druid连接池+PageHelper分页插件

我们这一一篇博客讲的是如何整合Springboot和Mybatis框架&#xff0c;然后使用generator自动生成mapper&#xff0c;pojo等文件。然后再使用阿里巴巴提供的开源连接池druid&#xff0c;这个连接池的好处我就不说了&#xff0c;集合了所有连接池的好处&#xff0c;并且还提供了监…

python提取部分字符串三参数_python3 字符串属性(三)

maketrans 和 translate的用法(配合使用)下面是python的英文用法解释maketrans(x, yNone, zNone, /)Return a translation table usable for str.translate().If there is only one argument, it must be a dictionary mapping Unicodeordinals (integers) or characters to Un…

java实现qq抢红包_Java实现抢红包功用

用多线程模仿多人一起抢红包。服务端将玩家发出的红包保存在一个行列里&#xff0c;然后用Job守时将红包信息推送给玩家。每一批玩家的抢红包恳求&#xff0c;其实操作的都是从行列中弹出的第一个红包元素&#xff0c;但当时的红包数量为空的时分&#xff0c;主动弹出下一个红包…

芯片里面100多亿个晶体管是如何安装上去的?

来源&#xff1a;金属加工如今随着芯片制程的不断提升&#xff0c;芯片中可以有100多亿个晶体管&#xff0c;如此之多的晶体管&#xff0c;究竟是如何安上去的呢&#xff1f;1当芯片被不停地放大&#xff0c;里面宛如一座巨大的城市。这是一个Top-down View 的SEM照片&#xff…

[CEOI2008] order

题目描述 有N个工作&#xff0c;M种机器&#xff0c;每种机器你可以租或者买过来. 每个工作包括若干道工序&#xff0c;每道工序需要某种机器来完成,你可以通过购买或租用机器来完成。 现在给出这些参数&#xff0c;求最大利润 输入输出格式 输入格式&#xff1a; 第一行给出 N…

response.end后抛了异常_(七)异常处理

(七)异常处理异常异常的体系结构java.lang.Throwable|-----java.lang.Error&#xff1a;一般不便携针对性的代码进行处理|-----java.lang.Exception&#xff1a;可以进行异常的处理|-----编译时异常&#xff08;checked|-----IOException|-----FileNotFoundException|-----Clas…

java xy x y_为什么该语句在Java中不起作用x ^ = y ^ = x ^ = y;

小编典典您的陈述大致相当于这种扩展形式&#xff1a;x x ^ (y y ^ (x x ^ y));与C语言不同&#xff0c;在Java中&#xff0c;保证二进制运算符的左操作数在右操作数之前进行求值。评估如下&#xff1a;x x ^ (y y ^ (x x ^ y))x 1 ^ (y 2 ^ (x 1 ^ 2))x 1 ^ (y 2 ^…

AI+视频分析:实时监测无处不在的安全风险

来源丨Forbes作者丨Louis Columbus编译丨科技行者纵观2020年运营层面的诸多挑战&#xff0c;公共事业企业已经意识到对其所运营的物理及网络安全体系进行360度全方位审视的重要意义。最近&#xff0c;由Gartner发布的调查报告显示&#xff0c;94%的北美CIO认为&#xff0c;对偏…

大数据第一期

一 、大数据的技术体系 有几个部分组成&#xff1a; 六层 数据可视化 &#xff08;Cboard &#xff0c; Echart&#xff09; 五层 数据分析&#xff08;数据仓库&#xff08;Hive&#xff09;&#xff0c;数据挖掘&#xff08;SparkStreming&#xff09;&#xff0c;OLAP&…