jquery按鍵監聽(移動div)

完整的 key press 過程分爲兩個部分:
1. 按鍵被按下;
2. 按鍵被鬆開。
當按鈕被按下時,發生 keydown 事件。
keydown() 方法觸發 keydown 事件,或規定當發生 keydown 事件時運行的函數。

event.which屬性指示按了哪個鍵或按鈕。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- jquery不可缺少 -->
    <script type="text/javascript" src="js/jquery-2.1.4.js"></script>
    <title>按鍵監聽</title>
</head>
<body>
    <div id="content" style="position:relative;width: 200px;height:200px;background:red"></div>

</body>
<script>    
  $(document).keydown(function(event){ 
    switch(event.which){
        case 37:
        $("#content").css("left","-=10px") ;
        break;
        case 38:$("#content").css("top","-=10px");
        break;
        case 39:$("#content").css("left","+=10px");
        break;
        case 40:$("#content").css("top","+=10px") ;
        break;
        default:break;
    }
  });
    $(document).keyup(function(event){ 
        $(document).keydown=null;
        return false;
    });
</script>
</html>

通過按下↑↓←→來移動div元素的位置
這裏寫圖片描述

發佈了47 篇原創文章 · 獲贊 50 · 訪問量 9萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章