В этой статье описывается метод реализации клавиатуры для управления движением DIV от JS. Поделитесь этим для вашей ссылки. Конкретный анализ заключается в следующем:
CSS Style Part:
Скопируйте код следующим образом: <style type = "text/css">
html, body {overflow: hidden;}
Body {Margin: 0; Padding: 0;}
Pre {Color: Green; Padding: 10px 15px; фон: #f0f0f0; граница: 1px пунктир #333; шрифт: 12px/1,5 Courier new; маржа: 12px;}
span {color:#999;}
#box {position: Absolute; Top: 50px; слева: 300px; ширина: 100px; высота: 100px; фон: красный;}
</style>
JS Часть:
Скопируйте код следующим образом: <script type = "text/javascript">
window.onload = function ()
{
var obox = document.getElementbyId ("box");
var bleft = btop = bright = bbottom = bctrlke = false;
setInterval (function ()
{
if (удары)
{
obox.style.left = obox.offsetleft - 10 + "px"
}
иначе, если (ярко)
{
obox.style.left = obox.offsetleft + 10 + "px"
}
if (btop)
{
obox.style.top = obox.offsettop - 10 + "px"
}
иначе if (bbottom)
{
obox.style.top = obox.offsettop + 10 + "px"
}
// предотвратить переполнение
Limit ();
}, 30);
document.onkeydown = function (событие)
{
var Event = Event || window.event;
BCTRLKEY = EVENT.CTRLKEY;
Switch (Event.KeyCode)
{
Случай 37:
Bleft = true;
перерыв;
Случай 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";
перерыв;
}
btop = true;
перерыв;
Случай 39:
яркий = правда;
перерыв;
Случай 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";
перерыв;
}
bbottom = true;
перерыв;
Случай 49:
bctrlkey && (obox.style.background = "green");
перерыв;
Случай 50:
bctrlkey && (obox.style.background = "желтый");
перерыв;
Случай 51:
bctrlkey && (obox.style.background = "blue");
перерыв;
}
вернуть ложь
};
document.onkeyup = function (событие)
{
Switch ((Event || window.event) .keycode)
{
Случай 37:
Bleft = false;
перерыв;
Случай 38:
btop = false;
перерыв;
Случай 39:
яркий = ложь;
перерыв;
Случай 40:
bbottom = false;
перерыв;
}
};
// предотвратить переполнение
Ограничение функции ()
{
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>
иллюстрировать:
Вверху: ↑ Далее: ↓ слева: ← Право: →
Ctrl + 1: фон становится зеленым
Ctrl + 2: фон становится желтым
Ctrl + 3: фон изменяется на синий
Ctrl + ↑: увеличить
Ctrl + ↓: сокращение
HTML часть:
Кода кода выглядит следующим образом: блок перемещается [div]
<div id = "box"> </div>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.