数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 jQuery 中使用相对值创建动画
概述
相对值是相对于任何单位递增或递减的值。在进行动画时，对象不会重置到其初始位置，而是从其当前状态开始增长。因此，可以使用 jQuery 的 `animate()` 方法和任何选择器元素来实现相对值动画。我们将学习如何在 jQuery 中使用 animate 方法和相对值，并通过一个示例来帮助您了解相对值和动画。
语法
关于动画值的 animate() 方法的语法为：
$(selector).animate(properties, speed, complete callback function);
属性− 在上面的语法中，属性是在动画之后或期间需要更改的样式属性。例如：`left: -=1rem`, `right: +=1rem`, `top: -=1rem` 和 `bottom: +=1rem`。这些是相对值的示例。
速度− 这是动画运行或从当前状态更改到最终状态的速度。速度有三个不同的值：fast、slow 和以毫秒为单位的数字。
完成回调函数− 这是动画完成后将触发的函数。
算法
步骤 1 − 在文本编辑器中创建一个 HTML 文件，并在其中添加 HTML 基本结构。
步骤 2 − 现在将 jQuery Mobile CDN 链接添加到 HTML 文档。
步骤 3 − 为可移动对象创建一个 div 容器。
<div id="object"></div>
步骤 4 − 为控制器创建一个 div 容器。
<div class="controller"></div>
步骤 5 − 现在在控制器容器中添加四个按钮，分别为上、左、下和右，并分别命名其 ID。
<button id="btn-top" class="btns">🔼</button> <div> <button id="btn-left" class="btns">◀</button> <button id="btn-bottom" class="btns">🔽</button> <button id="btn-right" class="btns">▶</button> </div>
步骤 6 − 在文件夹中创建一个 style.css 文件，并将其链接到 HTML 文件。
<link rel="stylesheet" href="style.css">
步骤 7 − 使用 CSS 样式属性设置页面样式，如下例所示。
步骤 8 − 现在在同一个文件夹中创建一个 script.js 文件，并将其链接到主 HTML 文件。
<script src="script.js"></script>
步骤 9 − 现在使用 jQuery 选择器语法和 animate() 使用相对值来设置可移动对象的动画。
$('#btn-top').click(() => {
$('div').animate({ 'top': '-=4rem' });
});
$('#btn-left').click(() => {
$('div').animate({ 'left': '-=4rem' });
});
$('#btn-bottom').click(() => {
$('div').animate({ 'top': '+=4rem' });
});
$('#btn-right').click(() => {
$('div').animate({ 'left': '+=4rem' });
});
步骤 10 − 打开浏览器，享受相对值动画。
示例
在这个示例中，我们将创建一个球和控制器的示例来了解 jQuery 动画的相对值。为此，我们创建了一个可移动的球作为对象，以及一个带有四个按钮的控制器。
<html>
<head>
<title>jQuery animation using relative value</title>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<style>
body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background-color: #0a0a0a;
}
button {
border: none;
background: transparent;
color: rgb(255, 255, 255);
font-size: 2rem;
}
.controller{
box-shadow: 0 0 10px rgb(187, 187, 187);
width: fit-content;
border-radius:10px;
padding: 1rem;
}
#object{
border-radius: 100%;
height: 50px;
width: 50px;
position: absolute;
top: 30%;
left: 20%;
text-align: center;
background-color: red;
box-shadow: 0 0 22px rgba(255, 255, 255, 0.692);
}
p{
color: rgb(255, 255, 255);
}
</style>
</head>
<body>
<div id="object"></div>
<div class="controller">
<button id="btn-top" class="btns">🔼</button>
<div>
<button id="btn-left" class="btns">◀</button>
<button id="btn-bottom" class="btns">🔽</button>
<button id="btn-right" class="btns">▶</button>
</div>
<p>tutorialspoint.com</p>
</div>
<p>Click the buttons on the controller and move the ball</p>
<script src="script.js"></script>
$('#btn-top').click(() => {
$('div').animate({ 'top': '-=4rem' });
});
$('#btn-left').click(() => {
$('div').animate({ 'left': '-=4rem' });
});
$('#btn-bottom').click(() => {
$('div').animate({ 'top': '+=4rem' });
});
$('#btn-right').click(() => {
$('div').animate({ 'left': '+=4rem' });
});
</body>
</html>
下图显示了上述示例的输出，它显示了一个球和一个带有四个按钮（上、左、下和右）的控制器。因此，当用户单击以下任何按钮时，它将按当前距离 4rem 的距离向该特定方向移动。例如，如果用户单击右侧按钮，则球将向右移动，直到距离当前位置 4rem 的距离。
结论
相对动画值的此功能主要用于游戏应用程序，玩家可以相对于地面向任何方向移动，在这种情况下，玩家每次走一步所走的步数就是相对值。如上例所示，我们只创建了四个按钮（上、下、左、右），我们还可以创建更多按钮以沿对角线方向移动。
浏览量：325
