在 JavaScript 中移动元素位置

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中移动元素位置

作者：迹忆客最近更新：2023/03/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!");
    }
});

输出：

在 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;
    }
});