极客教程如何使用箭头键将一个元素向左、向右、向上和向下移动
任务是使用jquery中的方向键将一个元素向左、向右、向上和向下移动，我们可以使用jQuery keydown()方法和.animate()方法。
每当用户在键盘上按下一个键，keydown()方法就会触发keydown事件。
语法:
$(selector).keydown(function)
方法:
- .keydown()方法用于检查是否有任何键被按下，并返回哪个键被按下。
- 检查哪个键被触发是由键码决定的。键码是按照。
- left = 37
- top=38
- right=39
- bottom=40
- 使用.animate()方法，根据按下的键来移动元素。
例子1：用向上的方向键将元素移到向上。
<!DOCTYPE html>
<html>
<head>
<title>
Move an element to left, right,
up and down using arrow keys
</title>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style type="text/css">
.box {
float: center;
background: green;
margin: 100px auto 0;
width: 100px;
height: 100px;
color: white;
font-size: 24px;
border: 1px solid #000000;
text-align: center;
position: relative;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Move an element to UP using UP arrow keys
</h3>
<h4>.keydown() method is used</h4>
<div class="box">UP</div>
<script type="text/javascript">
(document).keydown(function(e) {
if (e.which == '38') { //up arrow key
(".box").finish().animate({
top: "-=50"
});
}
});
</script>
</center>
</body>
</html>
输出:
- 在按下向上箭头键之前。
- 按向上箭头键后。
例子2：用向下的方向键将元素移到向下。
<!DOCTYPE html>
<html>
<head>
<title>
Move an element to left, right,
up and down using arrow keys
</title>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style type="text/css">
.box {
float: center;
background: green;
margin: 10px auto 0;
width: 100px;
height: 100px;
color: white;
font-size: 24px;
border: 1px solid #000000;
text-align: center;
position: relative;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Move an element to Down using Down arrow keys
</h3>
<h4>.keydown() method is used</h4>
<div class="box">DOWN</div>
<script type="text/javascript">
(document).keydown(function(e) {
if (e.which == '40') { //down arrow key
(".box").finish().animate({
top: "+=50"
});
}
});
</script>
</center>
</body>
</html>
输出:
- 在按下方向键之前。
- 按向下箭头键后。
例子3：使用左方向键将元素向左移动。
<!DOCTYPE html>
<html>
<head>
<title>
Move an element to left, right,
up and down using arrow keys
</title>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style type="text/css">
.box {
float: center;
background: green;
margin: 10px auto 0;
width: 100px;
height: 100px;
color: white;
font-size: 24px;
border: 1px solid #000000;
text-align: center;
position: relative;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Move an element to Left using Left arrow keys
</h3>
<h4>.keydown() method is used</h4>
<div class="box">LEFT</div>
<script type="text/javascript">
(document).keydown(function(e) {
if (e.which == '37') { //left arrow key
(".box").finish().animate({
left: "-=50"
});
}
});
</script>
</center>
</body>
</html>
输出:
- 在按下左方向键之前。
- 按左方向键后。
例子4：使用右方向键将元素向右移动。
<!DOCTYPE html>
<html>
<head>
<title>
Move an element to left, right,
up and down using arrow keys
</title>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style type="text/css">
.box {
float: center;
background: green;
margin: 10px auto 0;
width: 100px;
height: 100px;
color: white;
font-size: 24px;
border: 1px solid #000000;
text-align: center;
position: relative;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Move an element to Right using Right arrow keys
</h3>
<h4>.keydown() method is used</h4>
<div class="box">RIGHT</div>
<script type="text/javascript">
(document).keydown(function(e) {
if (e.which == '39') { //Right arrow key
(".box").finish().animate({
left: "+=50"
});
}
});
</script>
</center>
</body>
</html>
输出:
- 在按下右方向键之前。
- 按右方向键后。
