Método de implementación de JS para controlar el movimiento DIV en el teclado

Este artículo describe el método para implementar el teclado para controlar el movimiento Div por JS. Compártelo para su referencia. El análisis específico es el siguiente:

Parte de estilo CSS:

Copie el código de la siguiente manera: <style type = "text/css">

html, cuerpo {desbordamiento: oculto;}

cuerpo {margen: 0; relleno: 0;}

pre {color: verde; relleno: 10px 15px; fondo: #f0f0f0; borde: 1px punteado #333; fuente: 12px/1.5 Courier New; Margen: 12px;}

span {color:#999;}

#box {posición: absoluto; superior: 50px; izquierda: 300px; ancho: 100px; altura: 100px; fondo: rojo;}

</style>

JS PARTE:

Copie el código de la siguiente manera: <script type = "text/javaScript">

Window.Onload = function ()

{

var obox = document.getElementById ("box");

var bleft = btop = bright = bbottom = bctrlkey = false;

setInterval (function ()

{

if (bleft)

{

obox.style.left = obox.offsetleft - 10 + "px"

}

más si (brillante)

{

obox.style.left = obox.offsetleft + 10 + "px"

}

if (btop)

{

obox.style.top = obox.offsettop - 10 + "PX"

}

más if (bbottom)

{

obox.style.top = obox.offsettop + 10 + "px"

}

// Evitar el desbordamiento

límite();

}, 30);

document.Onkeydown = function (evento)

{

VAR Event = Event || Window.event;

bctrlkey = event.ctrlkey;

Switch (Event.KeyCode)

{

Caso 37:

bleft = verdadero;

romper;

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";

romper;

}

btop = verdadero;

romper;

Caso 39:

brillante = verdadero;

romper;

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";

romper;

}

bbottom = verdadero;

romper;

Caso 49:

bctrlkey && (obox.style.background = "verde");

romper;

Caso 50:

bctrlkey && (obox.style.background = "amarillo");

romper;

Caso 51:

bctrlkey && (obox.style.background = "azul");

romper;

}

devolver falso

};

document.OnKeyUp = function (evento)

{

Switch ((Event || Window.Event) .Keycode)

{

Caso 37:

bleft = falso;

romper;

Caso 38:

btop = falso;

romper;

Caso 39:

brillante = falso;

romper;

Caso 40:

bbottom = falso;

romper;

}

};

// Evitar el desbordamiento

Límite de función ()

{

var doc = [document.documentelement.clientwidth, document.documentelement.clientHeight]

// evitar que el lado izquierdo se desborde

obox.offsetleft <= 0 && (obox.style.left = 0);

// evitar el desbordamiento superior

obox.offsettop <= 0 && (obox.style.top = 0);

// evitar que el lado derecho se desborde

doc [0] - OBOX.OffSetleft - OBOX.OffSetWidth <= 0 && (OBOX.Style.left = Doc [0] - Obox.OffSetWidth + "Px");

// evitar el desbordamiento del fondo

Doc [1] - OBOX.OFFSETTOP - OBOX.OFFSETHEight <= 0 && (OBOX.STYLE.TOP = DOC [1] - OBOX.OFFSETHEight + "PX")

}

};

</script>

ilustrar:

Arriba: ↑ Siguiente: ↓ Izquierda: ← Derecha: →

Ctrl + 1: el fondo se vuelve verde

Ctrl + 2: el fondo se vuelve amarillo

Ctrl + 3: el fondo cambia a azul

Ctrl + ↑: zoom en

Ctrl + ↓: encogimiento

Parte de HTML:

La copia del código es la siguiente: el bloque que se está moviendo [div]

<div id = "box"> </div>

Espero que este artículo sea útil para la programación de JavaScript de todos.