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:

<style type="text/css">
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;}
</style>

bahagian js:

Salin kod Kod adalah seperti berikut:

<script type="text/javascript">
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 <=0 && (oBox.style.left = 0);
//Halang limpahan atas
oBox.offsetTop <=0 && (oBox.style.top = 0);
//Cegah limpahan di sebelah kanan
doc[0] - oBox.offsetLeft - oBox.offsetWidth <= 0 && (oBox.style.left = doc[0] - oBox.offsetWidth "px");
//Cegah limpahan bawah
doc[1] - oBox.offsetTop - oBox.offsetHeight <= 0 && (oBox.style.top = doc[1] - oBox.offsetHeight "px")
}
};
</skrip>



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] <div id="box"></div>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.