在 JavaScript 中移动元素位置
Mehvish Ashiq
2024年2月15日
这篇文章教你如何在 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 样式将元素从一个位置移动到另一个位置。你可以在此处找到有关此方法的更多信息。
作者： Mehvish Ashiq
