在 JavaScript 中移動元素位置

Mehvish Ashiq 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用箭頭鍵移動元素位置
  2. 使用 箭頭鍵 使用 jQuery 移動元素位置
在 JavaScript 中移動元素位置

這篇文章教你如何在 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!");
    }
});

輸出:

在 javascript 中移動元素位置 - 移動圓圈

在上面的輸出中,我們使用箭頭鍵上下左右移動元素。首先,在本例中,我們使用 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;
    }
});

輸出:

在 javascript 中移動元素位置 - 移動標題

在本例中,我們使用鍵盤的箭頭鍵移動 <h1> 元素。每當在 document 中按下箭頭鍵時,元素都會移動 30px

jQuery 的 keydown() 方法 觸發 HTML 元素上的事件或將事件處理程式繫結到 keydown JavaScript 事件。

event.which 用於滑鼠或鍵事件,並指示在這種情況下按下的特定鍵/按鈕。我們將它用於箭頭鍵。

finish() 函式終止當前正在執行的所有動畫。它刪除排隊的動畫並完成匹配的標籤/元素。

另一方面,animate() 方法使用 CSS Cascading Style Sheet 樣式將元素從一個位置移動到另一個位置。你可以在此處找到有關此方法的更多資訊。

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript Element