js实现键盘控件div移动的方法
本文介绍了用js控制键盘的div移动的方法，供大家参考，具体分析如下：CSS样式部分：
复制代码代码如下所示：
HTML，体{溢出：隐藏；}
身体{边缘：0；填充：0；}
预{颜色：绿色；填充：10px 15px；背景：# f0f0f0；边界：1px点缀# 333；字体：12px / 1.5快递新；保证金：12px；}。
跨{颜色：# 999；}
#箱{位置：绝对；顶部：50px；左：300px；宽度：100px；身高：100px；背景：红色；}
js的一部分：
复制代码代码如下所示：
在window.onload =功能（）
{
无功obox = document.getelementbyid（盒子）；
VaR为= = = = bbottom BTOP明亮bctrlkey = false；
setInterval（）函数（
{
如果（好的）
{
obox.style.left = obox.offsetleft - 10 +PX
}
否则如果（明亮）
{
obox.style.left = obox.offsetleft + 10 +PX
}
如果（BTOP）
{
obox.style.top = obox.offsettop - 10 +PX
}
Else if (bBottom)
{
obox.style.top = obox.offsettop + 10 +PX
}
/防止溢出
极限（）；
}，30）；
document.onkeydown =函数（事件）
{
var =事件| | window.event事件；
bctrlkey = event.ctrlkey；
开关（事件。密码）
{
案例37：
明亮=真；
打破；
案例38：
如果（bctrlkey）
{
无功oldwidth = obox.offsetwidth；
无功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；
打破；
}
BTOP =真；
打破；
案例39：
明亮=真实；
打破；
案例40：
如果（bctrlkey）
{
无功oldwidth = obox.offsetwidth；
无功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；
打破；
}
bbottom =真；
打破；
案例49：
BCtrlKey（obox.style.background = 绿色）；
打破；
案例50：
BCtrlKey（obox.style.background =黄色）；
打破；
案例51：
BCtrlKey（obox.style.background =蓝色）；
打破；
}
返回false
}；
document.onkeyup =函数（事件）
{
（开关（事件| |窗口。事件）。KeyCode）
{
案例37：
明亮=假；
打破；
案例38：
BTOP = false；
打破；
案例39：
明亮=假；
打破；
案例40：
bbottom = false；
打破；
}
}；
/防止溢出
函数极限（）
{
var doc = { document.documentelement.clientwidth，文档。文档元素}自己}。
防止溢出/左
obox.offsetleft <= 0（obox.style.left = 0）；
/防止顶溢出
obox.offsettop <= 0（obox.style.top = 0）；
右/防止溢出
DOC { 0 } - obox.offsetleft - obox.offsetwidth <= 0（obox.style.left =医生{ 0 } - obox.offsetwidth +PX）；
在底部以防止溢出。
DOC { 1 } - obox.offsettop - obox.offsetheight <= 0（obox.style.top =医生{ 1 } - obox.offsetheight +PX）
}
}；
解释uff1a
：：=：
Ctrl + 1：背景是绿色的
Ctrl + 2：背景是黄色的
Ctrl + 3：背景是蓝色的
Ctrl：放大
Ctrl +向下箭头：窄
HTML的一部分：
复制代码如下：移动块{ }
希望本文能对大家的javaｓｃｒｉｐｔ程序设计有所帮助。