Este artigo descreve o método de implementar o teclado para controlar o movimento DIV por JS. Compartilhe para sua referência. A análise específica é a seguinte:
Parte do estilo CSS:
Copie o código da seguinte forma: <style type = "text/css">
HTML, corpo {Overflow: Hidden;}
corpo {margem: 0; preenchimento: 0;}
pre {cor: verde; preenchimento: 10px 15px; fundo: #f0f0f0; borda: 1px pontilhado #333; font: 12px/1.5 courier novo; margem: 12px;}
span {cor:#999;}
#Box {Posição: Absoluto; topo: 50px; esquerda: 300px; largura: 100px; altura: 100px; fundo: vermelho;}
</style>
Parte do JS:
Copie o código da seguinte forma: <script type = "text/javascript">
window.onload = function ()
{
var obox = document.getElementById ("caixa");
var bleft = btop = Bright = bbottom = bctrlkey = false;
setInterval (function ()
{
se (bleft)
{
obox.style.left = obox.offsetleft - 10 + "px"
}
caso contrário, se (brilhante)
{
obox.style.left = obox.offsetleft + 10 + "px"
}
if (BTOP)
{
obox.style.top = obox.offsettop - 10 + "px"
}
caso contrário, se (Bbottom)
{
obox.style.top = obox.offsettop + 10 + "px"
}
// evita o transbordamento
limite();
}, 30);
document.onkeydown = function (evento)
{
Var Evento = Evento || Window.Event;
bctrlkey = event.ctrlkey;
switch (event.keycode)
{
Caso 37:
bleft = true;
quebrar;
Caso 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";
quebrar;
}
btop = true;
quebrar;
Caso 39:
brilhante = verdadeiro;
quebrar;
Caso 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";
quebrar;
}
bbottom = true;
quebrar;
Caso 49:
bctrlkey && (obox.style.background = "Green");
quebrar;
Caso 50:
bctrlkey && (obox.style.background = "amarelo");
quebrar;
Caso 51:
bctrlkey && (obox.style.background = "azul");
quebrar;
}
retornar falso
};
document.onkeyup = function (evento)
{
Switch ((evento || window.event) .KeyCode)
{
Caso 37:
bleft = false;
quebrar;
Caso 38:
btop = false;
quebrar;
Caso 39:
brilhante = falso;
quebrar;
Caso 40:
bbottom = false;
quebrar;
}
};
// evita o transbordamento
limite de função ()
{
var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight]
// impedem que o lado esquerdo transborde
obox.OffSetLeft <= 0 && (obox.style.left = 0);
// impedem o transbordamento superior
obox.offsetTop <= 0 && (obox.style.top = 0);
// impedem que o lado direito transborde
doc [0] - obox.offsetleft - obox.offsetWidth <= 0 && (obox.style.left = doc [0] - obox.offsetWidth + "px");
// impedir o transbordamento inferior
doc [1] - obox.offsettop - obox.offsetheight <= 0 && (obox.style.top = doc [1] - obox.offsetheight + "px")
}
};
</script>
ilustrar:
TOP: ↑ Próximo: ↓ Esquerda: ← Direita: →
Ctrl + 1: o fundo fica verde
Ctrl + 2: o fundo fica amarelo
Ctrl + 3: o fundo muda para o azul
Ctrl + ↑: Zoom em
Ctrl + ↓: encolher
Parte HTML:
A cópia do código é a seguinte: o bloco que está sendo movido [div]
<div id = "caixa"> </div>
Espero que este artigo seja útil para a programação JavaScript de todos.