JS键位控制图片移动实现-优快云博客

本文链接：https://blog.youkuaiyun.com/lmc0813/article/details/102732394

这篇博客介绍了如何使用JavaScript设置键位，实现控制图片在页面上移动的功能。通过监听键盘事件，设置上下左右键位，进而改变图片的位置。提供了完整的代码示例和效果演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS简单的键位设置和控制图片移动

用JS设置键位控制图片移动

1.设置上下左右键位

//设置上键
   function Adove() {
    Return = event.keyCode;
   }
   //设置下键
   function Below() {
    bot = event.keyCode;
   }
   //设置左键
   function left() {
    left2 = event.keyCode;
   }
   //设置右键
   function Right() {
    right = event.keyCode;
   }

2.控制键位的上下左右

function m() {
    if (event.keyCode == lef) {
     img.left -= 100;
    }
    if (event.keyCode == up) {
     img.top -= 100;
    }
    if (event.keyCode == righ) {
     img.left += 100;
    }
    if (event.keyCode == bont) {
     img.top += 100;
    }
    img.style.left = img.left + 'px', img.style.top = img.top + 'px';
   }
   document.onkeydown = m;

全部代码:

<!DOCTYPE html>
<html>
 <head lang="en">
  <meta charset="UTF-8">
  <title></title>
    <style>
   img{
    width: 100px;
     height: 100px;
     position: absolute;
     left: 0px; 
     top: 0px;
   }
  </style>
  </head>
 <body>
  <div style="position: absolute; margin-left: 500px;">
   <table border="0" style="margin-bottom: 100px" cellspacing="0">
    <div>
     <tr>
      <td>
       <p>上</p>
      </td>
      <td><input type="text" onkeyup="Adove()" />
      </td>
     </tr>
     <tr>
      <td>
       <p>下</p>
      </td>
      <td><input type="text" onkeyup="Below()" />
      </td>
     </tr>
     <tr>
      <td>
       <p>左</p>
      </td>
      <td><input type="text" onkeyup="left()" />
      </td>
     </tr>
     <tr>
     <td>
       <p>右</p>
      </td>
      <td><input type="text" onkeyup="Right()" />
      </td>
     </tr>
     <tr>
      <td colspan="2" align="center"><input type="button" value="设置" onclick="c()" />
      </td>
     </tr>
    </div>
   </table>
  </div>
  <label id="show" />
  <img id="img" src="img/timg.jpg" />
  <script language="JavaScript">
   var img = document.getElementById("img");
   img.left = 0;
   img.top = 0;
   //创建变量
   var Return;
   var left2;
   var right;
   var bot;
   var up;
   var lef;
   var righ;
   var bont;

function c() {
    up = Return;
    lef = left2;
    righ = right;
    bont = bot;
   }
   //设置上键
   function Adove() {
    Return = event.keyCode;
   }
   //设置下键
   function Below() {
    bot = event.keyCode;
   }
   //设置左键
   function left() {
    left2 = event.keyCode;
   }
   //设置右键
   function Right() {
    right = event.keyCode;
   }
   //控制键位的上下左右
   function m() {
    if (event.keyCode == lef) {
     img.left -= 100;
    }
    if (event.keyCode == up) {
     img.top -= 100;
    }
    if (event.keyCode == righ) {
     img.left += 100;
    }
    if (event.keyCode == bont) {
     img.top += 100;
    }
    img.style.left = img.left + 'px', img.style.top = img.top + 'px';
   }
   document.onkeydown = m;
  </script>
 </body>
</html>