如何使用箭头键向左、向右、向上和向下移动元素？

任务是使用 jquery 中的箭头键将元素向左、向右、向上和向下移动，我们可以使用 jQuery keydown() 方法和.animate() 方法。
每当用户按下键盘上的某个键时， keydown() 方法就会触发 keydown 事件。
句法：

$(selector).keydown(function)

方法：

1. .keydown() 方法用于检查是否有任何键被按下，并返回按下了哪个键。
2. 检查哪个键被触发是由键码决定的。密钥代码如下：
   • 左 = 37
   • 向上 = 38
   • 右 = 39
   • 向下 = 40
3. 元素根据按下的键移动是使用.animate() 方法完成的

示例 1：使用向上箭头键向上移动元素。

  

    
      Move an element to left, right,
      up and down using arrow keys
    
    
    
    
        .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;
        }
    

  

    
         
         GeeksforGeeks 
        
        
          Move an element to UP using UP arrow keys
        
        .keydown() method is used
        UP
        
            $(document).keydown(function(e) {
                if (e.which == '38') { //up arrow key
                    $(".box").finish().animate({
                        top: "-=50"
                    });
                }
            });
        
    

                    

输出：

• 在按向上箭头键之前：
  
• 按向上箭头键后：
  

示例 2：使用向下箭头键将元素向下移动。

  

    
      Move an element to left, right,
      up and down using arrow keys
    
    
    
    
        .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;
        }
    

  

    
         
          GeeksforGeeks 
        
        
          Move an element to Down using Down arrow keys
        
        .keydown() method is used
        DOWN
        
            $(document).keydown(function(e) {
                if (e.which == '40') { //down arrow key
                    $(".box").finish().animate({
                        top: "+=50"
                    });
                }
            });
        
    

  
                             

输出：

• 在按下向下箭头键之前：
  
• 按向下箭头键后：
  

示例 3：使用向左箭头键向左移动元素。

  

    
      Move an element to left, right, 
      up and down using arrow keys
    
    
    
    
        .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;
        }
    

  

    
         
          GeeksforGeeks 
        
        
          Move an element to Left using Left arrow keys
        
        .keydown() method is used
        LEFT
        
            $(document).keydown(function(e) {
                if (e.which == '37') { //left arrow key
                    $(".box").finish().animate({
                        left: "-=50"
                    });
                }
            });
        
    

  
      

输出：

• 按左箭头键之前：
  
• 按左箭头键后：
  

示例 4：使用向右箭头键向右移动元素。

  

    
      Move an element to left, right, 
      up and down using arrow keys
    
    
    
    
        .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;
        }
    

  

    
         
          GeeksforGeeks 
        
        
          Move an element to Right using Right arrow keys
        
        .keydown() method is used
        RIGHT
        
            $(document).keydown(function(e) {
                if (e.which == '39') { //Right arrow key
                    $(".box").finish().animate({
                        left: "+=50"
                    });
                }
            });
        
    

  
       

输出：

• 在按右箭头键之前：
  
• 按右箭头键后：