js实现键盘控制DIV移动的方法
本文实例讲述了js实现键盘控制DIV移动的方法。分享给大家供大家参考。具体分析如下：
css样式部分：
<styletype="text/css">
html,body{overflow:hidden;}
body{margin:0;padding:0;}
pre{color:green;padding:10px15px;background:#f0f0f0;border:1pxdotted#333;font:12px/1.5CourierNew;margin:12px;}
span{color:#999;}
#box{position:absolute;top:50px;left:300px;width:100px;height:100px;background:red;}
</style>
js部分：
<scripttype="text/javascript">
window.onload=function()
{
varoBox=document.getElementById("box");
varbLeft=bTop=bRight=bBottom=bCtrlKey=false;
setInterval(function() { if(bLeft) { oBox.style.left=oBox.offsetLeft-10+"px" } elseif(bRight) { oBox.style.left=oBox.offsetLeft+10+"px" }
if(bTop) { oBox.style.top=oBox.offsetTop-10+"px" } elseif(bBottom) { oBox.style.top=oBox.offsetTop+10+"px" } //防止溢出 limit(); },30);
document.onkeydown=function(event) { varevent=event||window.event; bCtrlKey=event.ctrlKey;
switch(event.keyCode) { case37: bLeft=true; break; case38: if(bCtrlKey) { varoldWidth=oBox.offsetWidth; varoldHeight=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; case39: bRight=true; break; case40: if(bCtrlKey) { varoldWidth=oBox.offsetWidth; varoldHeight=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; case49: bCtrlKey&&(oBox.style.background="green"); break; case50: bCtrlKey&&(oBox.style.background="yellow"); break; case51: bCtrlKey&&(oBox.style.background="blue"); break; }
returnfalse };
document.onkeyup=function(event) { switch((event||window.event).keyCode) { case37: bLeft=false; break; case38: bTop=false; break; case39: bRight=false; break; case40: bBottom=false; break; } };
//防止溢出 functionlimit() { vardoc=[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>