提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

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

JS控制方法 实现 移动 div 键盘
2023-06-13 09:15:39 时间

本文实例讲述了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>

说明：

上：↑下：↓左：←右：→
Ctrl+1:背景变为绿色
Ctrl+2:背景变为黄色
Ctrl+3:背景变为蓝色
Ctrl+↑:放大
Ctrl+↓:缩小

html部分：

复制代码代码如下:被移动的方块【DIV】
<divid="box"></div>

希望本文所述对大家的javascript程序设计有所帮助。

相关文章