Js运动

article/2025/9/30 13:31:43

JavaScript之Js运动

在我们进行web开发的过程中，为了与用户进行更加友好、有趣的交互，拥有一套完美的运动框架就能轻松解决。

这次就给大家带来Javascript学习中Js运动的编写和注意事项。实现运动的思想很简单，首先对这个元素获取定位，然后通过改变该元素的left值和top值或者透明度，通过定时器就可以实现元素的运动效果。

Js运动代码编写的过程，基本步骤如下：
1、关闭上一次定时器。
因为重复点击多次开始运动，就相当于重复启动了多次定时器，这样造成的麻烦就是点击多次运动会加速。如果我们确保同一时间只启动一个定时器，在每次启动定时器之前先将上一次定时器关闭，就可以有效的解决上述问题。
关闭定时器：clearInterval(timer);
2、运动和停止分开。
到达目的值后，点击按钮，还会往前运动，这时我们就需要用if-else语句将运动和停止分开。

var timer = setInterval(function(){if(oDiv.offsetLeft >= 500){clearInterval(timer);   //停止运动}else{oDiv.style.left = oDiv.offsetLeft + speed + "px"; //运动}
},30);

3、分析元素怎么动

接下来我们将从匀速运动、淡入淡出、缓冲运动、多物体运动这些案例逐一展开分享。

一、匀速运动：速度不会改变。

分析： 1.实现匀速运动效果，我们先设置元素样式，然后通过document.getElementById(id)获取到对应的id节点元素。
2.关闭上一次定时器
3.定义speed速度（可以随意定义运动的速度值）
4.设置运动和停止分开
【注】接下来的案例分析与之类似，在代码块中详细注释。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>//css样式设置*{margin: 0px; padding: 0px;}#div1{width: 100px; height: 100px; background-color: red; position: absolute; left: 0px; top: 200px;}</style><script>window.onload = function (){var oBtn = document.getElementById("btn1");//获取btn1元素节点var oDiv = document.getElementById("div1");//获取div1元素节点oBtn.onclick = function(){clearInterval(timer);//关闭上一次定时器var speed = 8;//设置速度为8var timer = setInterval(function(){//记录定时器返回值，设置定时器，30ms运动一下if(oDiv.offsetLeft >= 500){clearInterval(timer);//如果运动到目的值，关闭定时器}else{oDiv.style.left = oDiv.offsetLeft + speed + "px";//运动方式}},30);}}</script></head><body><button id = 'btn1'>开始运动</button><div id = 'div1'></div></body>
</html>

来看一下匀速运动的效果图：
匀速运动的效果展示

二、分享到菜单案例

封装了starMove和startMove2函数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#menu{width: 100px; height: 200px; background-color: gray; position: absolute; top: 300px; left: -100px;}#menu span{width: 20px; height: 60px; line-height: 20px; background-color: yellow; position: absolute; left: 100px; top: 70px;}</style><script>window.onload = function(){var oMenu = document.getElementById("menu");//鼠标移入，调用startMove函数oMenu.onmouseover = function(){startMove();}//鼠标移出，调用startMove2函数oMenu.onmouseout = function(){startMove2();}}var timer = null; //记录定时器返回值function startMove(){var oMenu = document.getElementById("menu");var speed = 5;//1、每次启动定时器，将上一次定时器关闭clearInterval(timer);//关闭定时器timer = setInterval(function(){//2、运动和停止分开,目的值是左侧边框位置0pxif(oMenu.offsetLeft == 0){clearInterval(timer);}else{oMenu.style.left = oMenu.offsetLeft + speed + 'px';//运动}}, 30);} function startMove2(){var oMenu = document.getElementById("menu");var speed = -5;//1、每次启动定时器，将上一次定时器关闭clearInterval(timer);timer = setInterval(function(){//2、运动和停止分开，目的值是左侧边框位置-100pxif(oMenu.offsetLeft == -100){clearInterval(timer);//关闭定时器}else{oMenu.style.left = oMenu.offsetLeft + speed + 'px';//运动}}, 30);}</script></head><body><div id = 'menu'><span>分享到</span></div></body>
</html>

上面的代码未免显得啰嗦笨拙，我们可以将它改动一下，把speed和iTarget的值作为形参传递到函数中，这样只封装成一个startMove函数就可以实现。

			window.onload = function(){var oMenu = document.getElementById("menu");oMenu.onmousemove = function(){starMove(3,0);//speed为3，目标值为0px};oMenu.onmouseout = function(){starMove(-3,-100);//speed为-3，目标值为-100px}// 记录定时器返回值var timer = null;function starMove(speed, iTarget){// 获取menu的idvar oMenu = document.getElementById("menu");// 关闭定时器clearInterval(timer);// 运动和停止timer = setInterval(function(){if(oMenu.offsetLeft == iTarget){clearInterval(timer);}else{oMenu.style.left = oMenu.offsetLeft + speed + "px";}},3);}}

来看一下分享到菜单的效果图：
分享到菜单案例效果

三、淡入淡出效果

通过改变透明度的值来实现元素的淡入淡出效果。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#img1{opacity: 0.3; filter: alpha(opacity=30);}body{background-color: black;}</style><script>window.onload = function(){var oImg = document.getElementById("img1");//鼠标移入，透明度为1oImg.onmouseover = function(){startMove(100);}//鼠标移出，透明度为0.3oImg.onmouseout = function(){startMove(30);}}//计算透明度的时候，如果遇到浏览器不兼容的问题，可以通过设置中间变量alpha完成计算var alpha = 30;//设置中间变量var timer = null;//function startMove(iTarget){var oImg = document.getElementById("img1");var speed = 2;//1、判断速度的正负if(alpha < iTarget){speed = Math.abs(speed);//如果当前值小于目标值，速度取正}else{speed = -Math.abs(speed);//如果当前值大于目标值，速度取负，停止运动}//2、每次启动定时器之前，现将上一次定时器关闭掉clearInterval(timer);timer = setInterval(function(){//3、运动和停止要分开if(alpha == iTarget){clearInterval(timer);}else{alpha += speed;//设置透明度oImg.style.opacity = alpha / 100;oImg.style.filter = `alpha(opacity=${alpha})`;// alert(`alpha(opacity=${alpha})`)}}, 30);           }</script></head><body><img id = 'img1' src="timg.jpeg" alt=""></body>
</html>

来看一下淡入淡出的效果图：
淡入淡出效果图

四、缓冲运动

匀速运动的动画效果就像一个钢铁直男，直来直去。为了给动画效果做的更加流畅、舒适，我们现在来了解一下缓冲运动。
什么是缓冲运动？举个栗子，刹车就是缓冲运动！速度与距离成正相关就是缓冲运动，距离越大，速度越大；距离越小，速度越小。在Js中，（距离/速度=8）实现的缓冲效果最好，所以我们可以定义速度：var speed = (iTarget - node.offsetLeft) / 8;
但是要特别注意的是，计算机能够识别的最小像素是1px,小于1px不能识别，同时定义速度的时候必须为整数，要不然可是会出大事情！！所以要在定义速度的时候给它一个判断：speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);即speed>0时，向上取整，否则向下取整。
下面来看看代码，详细学习一下缓冲运动。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0px; padding: 0px;}#div1{width: 100px; height: 100px; background-color: red; position: absolute; left: 0px; top: 200px;}span{width: 1px; height: 500px; background-color: black; position: absolute; left: 500px; top: 0px; display: block;}</style><script>window.onload = function(){var oBtn = document.getElementById("btn1");//点击按钮，调用startMove函数，目标值为500pxoBtn.onclick = function(){startMove(500);}}//定时器var timer = null;//封装startMove函数function startMove(iTarget){var oDiv = document.getElementById("div1");var oTxt = document.getElementById("txt1");//关闭上一次的定时器clearInterval(timer);timer = setInterval(function(){//计算速度var speed = (iTarget - oDiv.offsetLeft) / 8;//如果速度>0,向上取整，否则向下取整。speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//运动和停止分开if(oDiv.offsetLeft == iTarget){clearInterval(timer);//到达目的值，关闭定时器}else{oDiv.style.left = oDiv.offsetLeft + speed + 'px';}//用来打印速度和当前值，更好的理解缓冲运动oTxt.value += speed + ", " + oDiv.offsetLeft + "\n";}, 30);}</script></head><body><button id = 'btn1'>开始运动</button><div id = 'div1'></div><span></span><textarea name="" id="txt1" cols="30" rows="10"></textarea></body>
</html>

缓冲运动效果图如下：
缓冲运动效果

五、多物体运动

多个元素一起运动会出现一个问题，就是上个元素运动未结束再去执行下一个运动的时候，上个元素会被干扰，暂停运动。这时就要让每一个元素拥有自己独享的定时器：node.index = i; node.timer = 定时器；

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px; height: 50px; background-color: red; margin: 50px;}</style><script>window.onload = function(){var aDivs = document.getElementsByTagName("div");for(var i = 0; i < aDivs.length; i++){aDivs[i].onmouseover = function(){//100 => 300startMove(this, 300);}aDivs[i].onmouseout = function(){//300 => 100startMove(this, 100);}}}/*让每一个运动的物体，都拥有一个自己独享的定时器。node.index = i;node.timer = 定时器*/function startMove(node, iTarget){clearInterval(node.timer);node.timer = setInterval(function(){//计算速度var speed = (iTarget - node.offsetWidth) / 8;speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);if(node.offsetWidth == iTarget){clearInterval(node.timer);}else{node.style.width = node.offsetWidth + speed + 'px';}}, 30);}</script></head><body><div></div><div></div><div></div><div></div></body>
</html>

多物体运行图
多物体运动
以上是Js运动的基本动画效果。相信大家看完这篇文章对Js运动有了一定的了解。下一篇将继续为大家深入Js运动，实现多物体多样式案例效果，并且为大家封装一个完美运动函数。
文章为学习阶段一个总结，有错误之处希望大家指正！

坚强阳光努力的人运气都不会太差！


http://chatgpt.dhexx.cn/article/r0uaprYx.shtml

相关文章

更优雅的编写JavaScript，使用这些函数秒变大神

更优雅的编写JavaScript，使用这些函数秒变大神

如果你刚接触JavaScript可能你还没有听说过.map()&#xff0c;.reduce()&#xff0c;.filter()。或者听说过&#xff0c;看过别人用过但是自己在实际项目中没有用过。在国内很多开发项目都是需要考虑IE8的兼容&#xff0c;为了兼容很多JavaScript好用的方法和技巧都被埋没了。但…
阅读更多...
JavaScript 计算标准体重的公式

JavaScript 计算标准体重的公式

判断标准体重 世卫计算方法&#xff1a; 男性&#xff1a;(身高cm&#xff0d;80)70&#xfe6a;标准体重 女性&#xff1a;(身高cm&#xff0d;70)60&#xfe6a;标准体重 标准体重正负10&#xfe6a;为正常体重 标准体重正负10&#xfe6a;~ 20&#xfe6a;为体重过重或…
阅读更多...
ping命令显示时间

ping命令显示时间

awk显示ping的时间ping 127.0.0.1 | awk { print $0"\t" strftime("%Y-%m-%d %H:%M:%S",systime()) } 注释&#xff1a;\t //换行字符 $0 //打印整行{print $0 "\t"} //逐行打印 strftime&#xff08;&#xff09;//时间函数。一般配合系统时间函…
阅读更多...
Linux Command date 显示时间

Linux Command date 显示时间

Linux Command date 显示时间 文章目录 Linux Command date 显示时间1. 简介2. 参数3. 日期格式4. 实例 1. 简介 命令功能&#xff1a;date 可以用来显示或设定系统的日期与时间。 2. 参数 -d<字符串>&#xff1a;显示字符串所指的日期与时间。字符串前后必须加上双引…
阅读更多...
网页显示时间代码

网页显示时间代码

网页显示时间代码如下&#xff1a; <test.html> <html> <body> <SCRIPT languagejavascript> function CurentTime(){var now new Date();var hh now.getHours();var mm now.getMinutes();var ss now.getTime() % 60000;var ms ss % 1000;ss (s…
阅读更多...
android 显示系统时间,Android 实时获取当前时间并显示

android 显示系统时间,Android 实时获取当前时间并显示

1、首先创建子线程与主线程进行数据交互的Handler &#xff0c;并更新UI SuppressLint("HandlerLeak") private Handler mHandler new Handler() { Override public void handleMessage(Message msg) { switch (msg.what) { case UPDATE_TIME: String time (String…
阅读更多...
用Android studio完成简单的显示时间

用Android studio完成简单的显示时间

用用Android studio完成简单的显示时间&#xff0c;并完成基础的布局改变&#xff0c;如字体大小&#xff0c;字体颜色等等问题。 在value中&#xff0c;颜色设置&#xff0c;可以自定义颜色。 dimens中完成字体大小的设置。 完成日历设置&#xff1a; package com.qst.Ca; im…
阅读更多...
windows系统ping包显示时间（绝对好用）

windows系统ping包显示时间（绝对好用）

使用管理员加打windows10中的Windows PowerShell&#xff0c;使用以下命令开始ping 例如ping192.168.0.1&#xff1a; ping.exe -t 192.168.0.1 |Foreach{"{0} - {1}" -f (Get-Date),$_}运行效果&#xff1a; 如果要ping又要记录到文本文档&#xff1a; ping.ex…
阅读更多...
HTML页面显示时间——网页数字时钟、钟表

HTML页面显示时间——网页数字时钟、钟表

HTML页面显示时间——网页数字时钟、钟表 一个HTML网页上动态显示系统时间&#xff0c;可以使用javascript的Date对象&#xff0c;在javascript中new 一个date对象&#xff0c;并且根据这个date对象获取相应的时间日期的具体日期时间&#xff0c;比如 年 月 日 时分秒&#xff…
阅读更多...
怎么将计算机工具栏时间去除,电脑任务栏不显示日期只显示时间的详细处理方法...

怎么将计算机工具栏时间去除,电脑任务栏不显示日期只显示时间的详细处理方法...

通常情况下&#xff0c;电脑右下角是会同时显示日期和时间的&#xff0c;这样可以方便我们查看。可是最近有用户在使用电脑时&#xff0c;却遇到了任务栏不显示日期只显示时间的问题&#xff0c;不知道怎么回事&#xff0c;更加不清楚如何解决&#xff0c;那么对于这一情况&…
阅读更多...
Linux之history命令显示时间和IP

Linux之history命令显示时间和IP

文章目录 一、需求说明二、配置步骤1、临时显示操作时间2、永久设置 三、补充说明1、HISTFILESIZE和HISTSIZE2、显示命令执行用户3、格式化输出参数配置4、历史命令保存位置 一、需求说明 系统运维工作中我们有时候需要查看历史命令&#xff0c;可以通过history命令查看&#x…
阅读更多...
cmd长ping记录日志和时间_ping命令结果中如何显示时间

cmd长ping记录日志和时间_ping命令结果中如何显示时间

展开全部 可以62616964757a686964616fe78988e69d8331333431373266通过批处理实现&#xff0c;在后面加上时间。 echo off d: for /l %%i in (1,1,%999999999%) do ( ping %1192.168.1.1 -n 1% && echo %% >>ping.txt date /t >>ping.txt time /t >>p…
阅读更多...
Vue中如何动态显示时间?

Vue中如何动态显示时间?

1&#xff1a;先上效果图&#xff1a; 2&#xff1a;注意点&#xff1a; &#xff08;1&#xff09;created( ) 与 mounted( )的区别就是&#xff1a; created 在模板渲染成html前调用&#xff0c;即通常初始化某些属性值&#xff0c;然后再渲染成视图 mounted在…
阅读更多...
QT学习 实时显示时间

QT学习 实时显示时间

今天完成一个实时显示时间的小demo 先上DJ先上DJ 先看一下效果 以两种形式显示当前具体时间 先附上代码&#xff0c;再总结一下核心代码 &#xff08;1&#xff09; myweather.ui文件 创建一个Label&#xff0c;ObjectName值为text&#xff1b;创建一个LCD Number&#xff…
阅读更多...
安卓实时显示时间

安卓实时显示时间

安卓开发过程中&#xff0c;有时候会用到实时的显示当前时间的功能&#xff0c;比如&#xff1a;自定义的状态栏就需要实时的更新当前时间&#xff0c;看下面图就是自定义的状态栏实时的更新时间&#xff1a; 实时显示更新时间代码&#xff1a;TimeThread.java import android.…
阅读更多...
Linux中history命令显示时间

Linux中history命令显示时间

项目场景&#xff1a; 编写Linux shell自动判卷脚本过程中&#xff0c;使用到history命令时&#xff0c;如何显示命令执行时间问题的解决。 问题描述 Linux中的history命令默认只会显示两列&#xff0c;序号和命令&#xff0c;无法显示时间&#xff0c;如下所示&#xff1a; …
阅读更多...
使用LCD1602显示温度或切换显示时间

使用LCD1602显示温度或切换显示时间

项目名称&#xff1a;测温过温报警系统及时钟系统 此系统主要由AT89C51、DS18B20温度模块、LCD1602、喇叭组成。大致的原理是DS18B20温度采集到的数据传送给AT89C51的P3.4&#xff0c;最后通过LCD1602显示当前的实时温度&#xff0c;根据中断按键判断显示时间还是温度。 复习使…
阅读更多...
vue项目中动态显示时间

vue项目中动态显示时间

vue项目中动态显示时间 前言一、js源代码二、效果图1.修改2.html与style的修改3.修改后效果图 总结 前言 在vue项目中动态显示时间&#xff0c;并且按日期、时间、星期一列排列。 我们想要的是下图时间显示方法。 一、js源代码 声明变量 export default {data() {return {ti…
阅读更多...
51单片机lcd1602显示时间日期

51单片机lcd1602显示时间日期

实验内容&#xff1a; 使用51单片机控制LCD1602液晶显示屏显示 时间/日期/星期/温度 信息&#xff0c;并可通过按键设置值。 仿真效果展示&#xff1a; proteus仿真图&#xff1a; 硬件测试图&#xff1a; 说明&#xff1a; 硬件测试按键使用左侧的四个独立按键 key…
阅读更多...
计算机怎么在桌面显示时间,怎么设置使电脑即显示时间有显示日期

计算机怎么在桌面显示时间,怎么设置使电脑即显示时间有显示日期

怎么设置使电脑即显示时间有显示日期以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！ 怎么设置使电脑即显示时间有显示日期 单击“开始→控制面板区域和语言选项”，在“区域选项”选项卡中单击“自定义”按钮打开…
阅读更多...
推荐文章

Copyright @ 2022~2023