js实现键盘控制DIV移动的方法

<style type="text/css">

　　html,body{overflow:hidden;}

　　body{margin:0;padding:0;}

　　pre{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;margin:12px;}

　　span{color:#999;}

　　#box{position:absolute;top:50px;left:300px;width:100px;height:100px;background:red;}

　　</style>

<script type="text/javascript">

　　window.onload = function ()

　　{

　　var oBox = document.getElementById("box");

　　var bLeft = bTop = bRight = bBottom = bCtrlKey = false;

　　setInterval(function ()

　　{

　　if (bLeft)

　　{

　　oBox.style.left = oBox.offsetLeft - 10 + "px"

　　}

　　else if (bRight)

　　{

　　oBox.style.left = oBox.offsetLeft + 10 + "px"

　　}

　　if (bTop)

　　{

　　oBox.style.top = oBox.offsetTop - 10 + "px"

　　}

　　else if(bBottom)

　　{

　　oBox.style.top = oBox.offsetTop + 10 + "px"

　　}

　　//防止溢出

　　limit();

　　},30);

　　document.onkeydown = function (event)

　　{

　　var event = event || window.event;

　　bCtrlKey = event.ctrlKey;

　　switch (event.keyCode)

　　{

　　case 37:

　　bLeft = true;

　　break;

　　case 38:

　　if(bCtrlKey)

　　{

　　var oldWidth = oBox.offsetWidth;

　　var oldHeight = oBox.offsetHeight;

　　oBox.style.width = oBox.offsetWidth * 1.5 + "px";

　　oBox.style.height = oBox.offsetHeight * 1.5 + "px";

　　oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 + "px";

　　oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 + "px";

　　break;

　　}

　　bTop = true;

　　break;

　　case 39:

　　bRight = true;

　　break;

　　case 40:

　　if(bCtrlKey)

　　{

　　var oldWidth = oBox.offsetWidth;

　　var oldHeight = oBox.offsetHeight;

　　oBox.style.width = oBox.offsetWidth * 0.75 + "px";

　　oBox.style.height = oBox.offsetHeight * 0.75 + "px";

　　oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 + "px";

　　oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 + "px";

　　break;

　　}

　　bBottom = true;

　　break;

　　case 49:

　　bCtrlKey && (oBox.style.background = "green");

　　break;

　　case 50:

　　bCtrlKey && (oBox.style.background = "yellow");

　　break;

　　case 51:

　　bCtrlKey && (oBox.style.background = "blue");

　　break;

　　}

　　return false

　　};

　　document.onkeyup = function (event)

　　{

　　switch ((event || window.event).keyCode)

　　{

　　case 37:

　　bLeft = false;

　　break;

　　case 38:

　　bTop = false;

　　break;

　　case 39:

　　bRight = false;

　　break;

　　case 40:

　　bBottom = false;

　　break;

　　}

　　};

　　//防止溢出

　　function limit()

　　{

　　var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight]

　　//防止左侧溢出

　　oBox.offsetLeft <=0 && (oBox.style.left = 0);

　　//防止顶部溢出

　　oBox.offsetTop <=0 && (oBox.style.top = 0);

　　//防止右侧溢出

　　doc[0] - oBox.offsetLeft - oBox.offsetWidth <= 0 && (oBox.style.left = doc[0] - oBox.offsetWidth + "px");

　　//防止底部溢出

　　doc[1] - oBox.offsetTop - oBox.offsetHeight <= 0 && (oBox.style.top = doc[1] - oBox.offsetHeight + "px")

　　}

　　};

　　</script>

被移动的方块【DIV】

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