📌  相关文章
📜  如何使用箭头键向左、向右、向上和向下移动元素?

📅  最后修改于: 2022-05-13 01:55:58.787000             🧑  作者: Mango

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

任务是使用 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
    
    
    

  

    
        

           GeeksforGeeks          

        

          Move an element to UP using UP arrow keys         

        

.keydown() method is used

        
UP
             
                    

输出:

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

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





  

    
      Move an element to left, right,
      up and down using arrow keys
    
    
    

  

    
        

            GeeksforGeeks          

        

          Move an element to Down using Down arrow keys         

        

.keydown() method is used

        
DOWN
             
                                

输出:

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

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



  

    
      Move an element to left, right, 
      up and down using arrow keys
    
    
    

  

    
        

            GeeksforGeeks          

        

          Move an element to Left using Left arrow keys         

        

.keydown() method is used

        
LEFT
             
         

输出:

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

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



  

    
      Move an element to left, right, 
      up and down using arrow keys
    
    
    

  

    
        

            GeeksforGeeks          

        

          Move an element to Right using Right arrow keys         

        

.keydown() method is used

        
RIGHT
             
          

输出:

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