<!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框移动的功能。
07.30《jQuery》——2.2使用键盘上下左右键控制div框
原文地址：https://www.cnblogs.com/justlive-tears/p/9393684.html