In diesem Artikel wird die Methode zur Implementierung der Tastatur zur Steuerung der Div -Bewegung durch JS beschrieben. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:
CSS -Stil Teil:
Kopieren Sie den Code wie folgt: <style type = "text/css">
html, Körper {Überlauf: versteckt;}
Körper {Rand: 0; Polsterung: 0;}
Pre {Color: Green; Padding: 10px 15px; Hintergrund: #f0f0f0; Grenze: 1px gepunktet #333; Schrift: 12px/1,5 Courier New; Margin: 12px;}
Span {Farbe:#999;}
#Box {Position: absolut; ober: 50px; links: 300px; Breite: 100px; Höhe: 100px; Hintergrund: rot;}
</style>
JS Teil:
Kopieren Sie den Code wie folgt: <script type = "text/javaScript">
window.onload = function ()
{
var obox = document.getElementById ("Box");
var bleft = btop = hell = bbottom = bctrlkey = false;
setInterval (function ()
{
if (Bleft)
{
obox.style.left = obox.offsetleft - 10 + "px"
}
sonst wenn (hell)
{
Obox.Style.Left = Obox.OffsetLeft + 10 + "PX"
}
if (btop)
{
obox.style.top = obox.offsettop - 10 + "px"
}
sonst wenn (Bbottom)
{
obox.style.top = obox.offsettop + 10 + "px"
}
// Überlauf verhindern
Limit();
}, 30);
Document.onkeydown = Funktion (Ereignis)
{
var event = event || Fenster.Event;
bctrlkey = event.ctrlkey;
Switch (Event.KeyCode)
{
Fall 37:
Bleft = true;
brechen;
Fall 38:
if (bctrlkey)
{
var oldwidth = obox.offsetwidth;
var oldHeight = obox.offseteight;
Obox.Style.Width = Obox.Offsetwidth * 1,5 + "px";
Obox.Style.Height = Obox.Offseteight * 1,5 + "px";
Obox.Style.Left = Obox.OffsetLeft - (Obox.Offsetwidth - OldWidth) / 2 + "PX";
obox.style.top = obox.offsettop - (obox.offseteight - OldHeight) / 2 + "px";
brechen;
}
btop = true;
brechen;
Fall 39:
hell = wahr;
brechen;
Fall 40:
if (bctrlkey)
{
var oldwidth = obox.offsetwidth;
var oldHeight = obox.offseteight;
Obox.Style.width = Obox.Offsetwidth * 0,75 + "PX";
Obox.Style.Height = Obox.Offseteight * 0,75 + "px";
Obox.Style.Left = Obox.OffsetLeft - (Obox.Offsetwidth - OldWidth) / 2 + "PX";
obox.style.top = obox.offsettop - (obox.offseteight - OldHeight) / 2 + "px";
brechen;
}
Bbottom = wahr;
brechen;
Fall 49:
bctrlkey && (obox.style.background = "green");
brechen;
Fall 50:
bctrlkey && (obox.style.background = "gelb");
brechen;
Fall 51:
bctrlkey && (obox.style.background = "blau");
brechen;
}
Return falsch
};
document.onkeyUp = Funktion (Ereignis)
{
Switch ((Ereignis || window.event) .KeyCode)
{
Fall 37:
BLEFT = falsch;
brechen;
Fall 38:
btop = false;
brechen;
Fall 39:
hell = falsch;
brechen;
Fall 40:
Bbottom = falsch;
brechen;
}
};
// Überlauf verhindern
Funktionslimit ()
{
var doc = [document.documentElement.clientwidth, document.documentElement.clientHeight]
// verhindern, dass die linke Seite überflutet
Obox.OffsetLeft <= 0 && (Obox.Style.Left = 0);
// Top -Überlauf verhindern
obox.offsettop <= 0 && (obox.style.top = 0);
// verhindern, dass die rechte Seite überflutet
doc [0] - obox.offsetleft - obox.Offsetwidth <= 0 && (obox.style.left = doc [0] - obox.Offsetwidth + "px");
// Bottom -Überlauf verhindern
doc [1] - obox.offsettop - obox.offseteight <= 0 && (obox.style.top = doc [1] - obox.offseteight + "px")
}
};
</script>
veranschaulichen:
Oben: ↑ Weiter: ↓ links: ← rechts: →
Strg + 1: Der Hintergrund wird grün
Strg + 2: Der Hintergrund wird gelb wird
Strg + 3: Der Hintergrund ändert sich in Blau
Strg + ↑: Zoomen
Strg + ↓: Schrumpfen
HTML -Teil:
Die Codekopie lautet wie folgt: Der Block wird verschoben [Div]
<div id = "box"> </div>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.