JavaScript 使用方向鍵移動(dòng)對象

■知識點(diǎn)

keyCode和charCode屬性在實(shí)際開發(fā)中比較常用，在不同事件類型和不同瀏覽器中的表現(xiàn)如表所示。

■實(shí)例設(shè)計(jì)

本例設(shè)計(jì)如何使用方向鍵控制對象的移動(dòng)效果。首先獲取頁面元素，通過CSS腳本控制元素的絕對定位、大小和背景色，然后在document對象上注冊鼠標(biāo)按下事件類型處理函數(shù)，在事件回調(diào)函數(shù)keyDown()中偵測當(dāng)前按下的方向鍵，并決定定位元素在窗口中的位置。其中，元素offsetLeft和 offsetTop屬性可以存取它在頁面中的位置。

<div id="box"></div>

<script>

var box = document.getEiementByid("box");

box.style.position = "iabsolute";

box.style.width = "20px";

box.style.height = "20px"; '

box.style.backgroundColor = "red";

document.onkeydown = keyDown;                //注冊keyDown事件處理函數(shù)

function keyDown (event){                    //方向鍵控制元素移動(dòng)函數(shù)

    var event = event |丨 window.event;      //標(biāo)準(zhǔn)化事件對象

    switch(event.keyCode){                   //獲取當(dāng)前按下鍵盤鍵的編碼

    case 37 :                                //按下左箭頭鍵，向左移動(dòng)5個(gè)像素

        box.style.left = box.offsetLeft - 5 + "px";

        break;

    case 39 :                                //按下右箭頭鍵，向右移動(dòng)5個(gè)像素

        box.style.left = box.offsetLeft + 5 + "px";

        break;

    case 38 :                                //按下上箭頭鍵，向上移動(dòng)5個(gè)像素

        box.style.top = box.offsetTop - 5 + "px";

        break; 

    case 40 :                                //按下下箭頭鍵，向下移動(dòng)5個(gè)像素

        box.style.top = box.offsetTop + 5 + "px";

        break;

    }

    return false

}

</script>