在 JavaScript 中移動元素位置
Mehvish Ashiq
2023年1月30日
2022年5月10日
這篇文章教你如何在 JavaScript 中移動元素位置。例如,如果按下右箭頭鍵,則將元素向右移動。
我們可以使用 element.style
屬性通過鍵盤箭頭鍵
向上、向下、向右或向左移動元素。
在 JavaScript 中使用箭頭鍵移動元素位置
<!DOCTYPE html>
<html>
<head>
<title>Move Element</title>
</head>
<body>
<div class="circle"></div>
</body>
</html>
.circle {
height: 80px;
width: 80px;
border-radius: 50%;
background-color: blue;
}
let myCircle = document.querySelector('.circle');
window.addEventListener('load', () =>{
myCircle.style.position = 'absolute';
myCircle.style.left = 0;
myCircle.style.top = 0;
});
window.addEventListener('keyup', (event) => {
switch (event.key) {
case 'ArrowLeft':
myCircle.style.left = parseInt(myCircle.style.left) - 5 + 'px';
break;
case 'ArrowRight':
myCircle.style.left = parseInt(myCircle.style.left) + 5 + 'px';
break;
case 'ArrowUp':
myCircle.style.top = parseInt(myCircle.style.top) - 5 + 'px';
break;
case 'ArrowDown':
myCircle.style.top = parseInt(myCircle.style.top) + 5 + 'px';
break;
default:
alert("Only Arrow Keys Are Allowed!");
}
});
輸出:
在上面的輸出中,我們使用箭頭鍵上下左右移動元素。首先,在本例中,我們使用 querySelector()
選擇類為 circle
的元素,該元素是 <div>
。
然後,我們使用 load
事件,該事件將在網頁完全載入後觸發。此事件將 <div>
元素移動到左上角。
此外,我們將 keyup
事件偵聽器附加到視窗。每當從視窗中的任何位置按下箭頭鍵時都會觸發它。
最後,我們使用 parseInt()
函式轉換為數字並加/減 5px
以移動元素。假設我們必須移動另一個不是數學形狀的元素。
使用 箭頭鍵
使用 jQuery 移動元素位置
<!DOCTYPE html>
<html>
<head>
<title>Move Element</title>
</head>
<body>
<h1 class="hOne">Heading One</h1>
</body>
</html>
h1{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 40px;
border: 5px solid #BADA55;
color: #A28;
margin: 0;
text-align: center;
}
$(document).keydown(function(e){
switch (e.which){
case 37: //left arrow key
$(".hOne").finish().animate({
left: "-=30"
});
break;
case 38: //up arrow key
$(".hOne").finish().animate({
top: "-=30"
});
break;
case 39: //right arrow key
$(".hOne").finish().animate({
left: "+=30"
});
break;
case 40: //bottom arrow key
$(".hOne").finish().animate({
top: "+=30"
});
break;
}
});
輸出:
在本例中,我們使用鍵盤的箭頭鍵移動 <h1>
元素。每當在 document
中按下箭頭鍵時,元素都會移動 30px
。
jQuery 的 keydown()
方法 觸發 HTML
元素上的事件或將事件處理程式繫結到 keydown
JavaScript 事件。
event.which
用於滑鼠或鍵事件,並指示在這種情況下按下的特定鍵/按鈕。我們將它用於箭頭鍵。
finish()
函式終止當前正在執行的所有動畫。它刪除排隊的動畫並完成匹配的標籤/元素。
另一方面,animate()
方法使用 CSS Cascading Style Sheet
樣式將元素從一個位置移動到另一個位置。你可以在此處找到有關此方法的更多資訊。
Author: Mehvish Ashiq