資料結構
網路
關係資料庫管理系統 (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.jquery.com/jquery-3.6.0.min.js" 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
