JQuery 通過方向鍵控制div上下左右移動

在CSS中當DOM元素的position屬性為absolute或relative時，我們可以通過改變這個元素的left和top屬性的具體值來控制元素在頁面中顯現的位置。

利用上述屬性，我們可以簡單實現一個元素在頁面中的移動效果，這里我們采用JQuery的animate方法來實現動畫效果，利用keydown監聽方向鍵按下的事件（這里采用keydown而不是keyup，是為了能夠在方向鍵被一直按着時，元素一直移動，keydown是監聽按下事件，keyup是監聽按鍵釋放事件）。這里我們還可以利用animate方法的一個特點，就是當其屬性的值為'+='或'-='之類時，它會根據原先的值先進行計算，再賦給相應的屬性，這個和C++的運算符是一致的。

示例代碼如下所示：

$(document).keydown(function(event){
        var keyNum = event.which;   //獲取鍵值
        var Item = $('#switcher');   //要移動的元素
        Item.css({position:'relative'});  //設置position
        switch(keyNum){  //判斷按鍵
        case 37: Item.animate({left:'-=20px'});break;
        case 38: Item.animate({top:'-=20px'});break;
        case 39: Item.animate({left:'+=20px'});break;
        case 40: Item.animate({top:'+=20px'});break;
        default:
            break;
        
        }
    });