บทความนี้อธิบายวิธีการใช้แป้นพิมพ์เพื่อควบคุมการเคลื่อนไหวของ DIV โดย JS แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
ส่วนสไตล์ CSS:
คัดลอกรหัสดังนี้: <style type = "text/css">
html, body {overflow: hidden;}
Body {margin: 0; padding: 0;}
pre {color: green; padding: 10px 15px; พื้นหลัง: #f0f0f0; ชายแดน: 1px Dotted #333; แบบอักษร: 12px/1.5 Courier ใหม่; มาร์จิ้น: 12px;}
Span {color:#999;}
#box {ตำแหน่ง: Absolute; Top: 50px; ซ้าย: 300px; Width: 100px; ความสูง: 100px; พื้นหลัง: สีแดง;}
</style>
JS Part:
คัดลอกรหัสดังนี้: <script type = "text/javascript">
window.onload = function ()
-
var obox = document.getElementById ("Box");
var bleft = btop = bright = bbottom = bctrlkey = false;
setInterval (ฟังก์ชัน ()
-
ถ้า (bleft)
-
obox.style.left = obox.offsetleft - 10 + "px"
-
อื่นถ้า (สว่าง)
-
obox.style.left = obox.offsetleft + 10 + "px"
-
ถ้า (btop)
-
obox.style.top = obox.offsettop - 10 + "px"
-
อื่นถ้า (bbottom)
-
obox.style.top = obox.offsettop + 10 + "px"
-
// ป้องกันการล้น
ขีด จำกัด ();
}, 30);
document.onkeydown = ฟังก์ชั่น (เหตุการณ์)
-
var event = เหตุการณ์ || window.event;
bctrlkey = event.ctrlkey;
switch (event.keycode)
-
กรณีที่ 37:
bleft = true;
หยุดพัก;
กรณีที่ 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";
หยุดพัก;
-
btop = true;
หยุดพัก;
กรณีที่ 39:
สดใส = จริง;
หยุดพัก;
กรณีที่ 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";
หยุดพัก;
-
bbottom = true;
หยุดพัก;
กรณีที่ 49:
bctrlkey && (obox.style.background = "สีเขียว");
หยุดพัก;
กรณีที่ 50:
bctrlkey && (obox.style.background = "สีเหลือง");
หยุดพัก;
กรณีที่ 51:
bctrlkey && (obox.style.background = "Blue");
หยุดพัก;
-
กลับเท็จ
-
document.onkeyup = ฟังก์ชั่น (เหตุการณ์)
-
สวิตช์ ((เหตุการณ์ || window.event) .keycode)
-
กรณีที่ 37:
bleft = false;
หยุดพัก;
กรณีที่ 38:
btop = false;
หยุดพัก;
กรณีที่ 39:
สดใส = เท็จ;
หยุดพัก;
กรณีที่ 40:
bbottom = false;
หยุดพัก;
-
-
// ป้องกันการล้น
ขีด จำกัด ฟังก์ชัน ()
-
var doc = [document.documentelement.clientwidth, document.documentelement.clientheight]
// ป้องกันด้านซ้ายจากล้น
obox.offsetleft <= 0 && (obox.style.left = 0);
// ป้องกันไม่ให้ล้น
obox.offsettop <= 0 && (obox.style.top = 0);
// ป้องกันด้านขวาจากล้น
doc [0] - obox.offsetleft - obox.offsetWidth <= 0 && (obox.style.left = doc [0] - obox.offsetWidth + "px");
// ป้องกันการล้นด้านล่าง
doc [1] - obox.offsettop - obox.offsetheight <= 0 && (obox.style.top = doc [1] - obox.offsetheight + "px")
-
-
</script>
ภาพประกอบ:
ด้านบน: ↑ถัดไป: ↓ซ้าย: ←ขวา: →
Ctrl + 1: พื้นหลังเปลี่ยนเป็นสีเขียว
Ctrl + 2: พื้นหลังเปลี่ยนเป็นสีเหลือง
Ctrl + 3: พื้นหลังเปลี่ยนเป็นสีน้ำเงิน
Ctrl + ↑: ซูมเข้า
Ctrl + ↓: หดตัว
ส่วน HTML:
การคัดลอกรหัสมีดังนี้: บล็อกที่ถูกย้าย [div]
<div id = "box"> </div>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน