<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#bbb {
height: 300px;
width: 300px;
background-color: aliceblue;
position: relative;
}
</style>
<script src="../jquery-3.2.1/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function() {
$("#left").click(function() {
$("div:not(:animated)").animate({
left: "-=100"
}, 50);
});
$("#right").click(function() {
$("div:not(:animated)").animate({
left: "+=100"
}, 50);
});
$("#up").click(function() {
$("div:not(:animated)").animate({
top: "-=100"
}, 50);
});
$("#down").click(function() {
$("div:not(:animated)").animate({
top: "+=100"
}, 50);
});
})
$(document).keydown(function() {
if(event.keyCode == ‘37‘) {
$("div:not(:animated)").animate({
left: "-=100"
}, 50);
}
if(event.keyCode == ‘39‘) {
$("div:not(:animated)").animate({
left: "+=100"
}, 50);
}
if(event.keyCode == ‘38‘) {
$("div:not(:animated)").animate({
top: "-=100"
}, 50);
}
if(event.keyCode == ‘40‘) {
$("div:not(:animated)").animate({
top: "+=100"
}, 50);
}
})
</script>
</head>
<body>
<button id="left">left</button>
<button id="right">right</button>
<button id="up">up</button>
<button id="down">down</button>
<div id="bbb"></div>
</body>
</html>
代码通过添加keydown方法，实现通过键盘操作div框移动的功能。
原文地址：https://www.cnblogs.com/justlive-tears/p/9393684.html
时间： 2024-11-11 19:17:13