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

■知識(shí)點(diǎn)

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

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

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

<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;                //注冊(cè)keyDown事件處理函數(shù)

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

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

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

    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>