<!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框移动的功能。
