js untuk melaksanakan kawalan papan kekunci kemahiran DIV movement_javascript

Contoh dalam artikel ini menerangkan cara melaksanakan kawalan papan kekunci pergerakan DIV menggunakan js. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

bahagian gaya css:

Salin kod Kod adalah seperti berikut: html,body{overflow:hidden;} badan{margin:0; padding:0;} pra{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;margin:12px;} rentang{warna:#999;} #box{position:absolute;top:50px;left:300px;width:100px;height:100px;background:red;} bahagian js:

Salin kod Kod adalah seperti berikut: window.onload = fungsi () { var oBox = document.getElementById("box"); var bLeft = bTop = bRight = bBottom = bCtrlKey = false; setInterval(fungsi () { jika (bKiri) { oBox.style.left = oBox.offsetLeft - 10 "px" } lain jika (bRight) { oBox.style.left = oBox.offsetLeft 10 "px" }

jika (bTop) { oBox.style.top = oBox.offsetTop - 10 "px" } lain jika(bBottom) { oBox.style.top = oBox.offsetTop 10 "px" } //Cegah limpahan had(); },30);

document.onkeydown = fungsi (acara) { var acara = peristiwa ||. window.event; bCtrlKey = event.ctrlKey;

suis (event.keyCode) { kes 37: bKiri = benar; rehat; kes 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";

pecah; } bTop = benar; rehat; kes 39: bRight = benar; rehat; kes 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";

pecah; } bBottom = benar;

rehat; kes 49: bCtrlKey && (oBox.style.background = "hijau"); rehat; kes 50: bCtrlKey && (oBox.style.background = "kuning"); rehat; kes 51: bCtrlKey && (oBox.style.background = "biru"); rehat; }

kembali palsu };

document.onkeyup = fungsi (acara) { suis ((acara || window.event).keyCode)

{ kes 37: bKiri = palsu; rehat; kes 38: bTop = palsu; rehat; kes 39: bRight = palsu; rehat; kes 40: bBottom = palsu; rehat; } };

//Cegah limpahan had fungsi() {

var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight] //Elakkan limpahan kiri oBox.offsetLeft //Halang limpahan atas oBox.offsetTop //Cegah limpahan di sebelah kanan doc[0] - oBox.offsetLeft - oBox.offsetWidth //Cegah limpahan bawah doc[1] - oBox.offsetTop - oBox.offsetHeight } };

Arahan:

Atas: ↑ Bawah: ↓ Kiri: ← Kanan: → Ctrl 1 : latar belakang bertukar hijau Ctrl 2 : latar belakang bertukar menjadi kuning

Ctrl 3 : latar belakang menjadi biru Ctrl ↑ : Zum masuk Ctrl ↓ : Zum keluar

bahagian html:

Salin kod

Kod adalah seperti berikut: Blok dialihkan [DIV] Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.