Artikel ini menjelaskan metode menerapkan keyboard untuk mengontrol pergerakan div oleh JS. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
Bagian Gaya CSS:
Salin kode sebagai berikut: <style type = "text/css">
html, body {overflow: tersembunyi;}
tubuh {margin: 0; padding: 0;}
pre {color: green; padding: 10px 15px; latar belakang: #f0f0f0; Border: 1px bertitik #333; font: 12px/1.5 kurir baru; margin: 12px;}
span {color:#999;}
#box {position: absolute; atas: 50px; kiri: 300px; lebar: 100px; tinggi: 100px; latar belakang: merah;}
</tyle>
Bagian JS:
Salin kode sebagai berikut: <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"
}
lain jika (cerah)
{
obox.style.left = obox.offsetleft + 10 + "px"
}
if (btop)
{
obox.style.top = obox.offsettop - 10 + "px"
}
lain jika (bbottom)
{
obox.style.top = obox.offsettop + 10 + "px"
}
// Cegah overflow
membatasi();
}, 30);
document.onkeydown = fungsi (acara)
{
var event = event || window.event;
bctrlkey = event.ctrlkey;
sakelar (event.keycode)
{
Kasus 37:
bleft = true;
merusak;
Kasus 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";
merusak;
}
btop = true;
merusak;
Kasus 39:
bright = true;
merusak;
Kasus 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";
merusak;
}
bbottom = true;
merusak;
Kasus 49:
bctrlkey && (obox.style.background = "green");
merusak;
Kasus 50:
bctrlkey && (obox.style.background = "yellow");
merusak;
Kasus 51:
bctrlkey && (obox.style.background = "blue");
merusak;
}
mengembalikan false
};
document.onkeyup = fungsi (acara)
{
sakelar ((event || window.event) .keycode)
{
Kasus 37:
bleft = false;
merusak;
Kasus 38:
btop = false;
merusak;
Kasus 39:
bright = false;
merusak;
Kasus 40:
bbottom = false;
merusak;
}
};
// Cegah overflow
batas fungsi ()
{
var doc = [document.documentelement.clientwidth, document.documentelement.clientHeight]
// Cegah sisi kiri meluap
OBOX.OffsetLeft <= 0 && (obox.Style.Left = 0);
// Cegah luapan teratas
obox.offsettop <= 0 && (obox.style.top = 0);
// Cegah sisi kanan dari overflow
DOC [0] - OBOX.OffsetLeft - OBOX.OffsetWidth <= 0 && (obox.Style.Left = DOC [0] - OBOX.OffsetWidth + "px");
// Cegah overflow bawah
DOC [1] - OBOX.Offsettop - OBOX.OffsetHeight <= 0 && (Obox.Style.Top = DOC [1] - OBOX.OffsetHeight + "PX")
}
};
</script>
menjelaskan:
Atas: ↑ Berikutnya: ↓ Kiri: ← Kanan: →
Ctrl + 1: Latar belakang berubah hijau
Ctrl + 2: Latar belakang berubah menjadi kuning
Ctrl + 3: Latar belakang berubah menjadi biru
Ctrl + ↑: Zoom in
Ctrl + ↓: menyusut
Bagian html:
Salinan kode adalah sebagai berikut: Blok dipindahkan [Div]
<Div id = "box"> </div>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.