تصف هذه المقالة طريقة تنفيذ لوحة المفاتيح للتحكم في حركة DIV بواسطة JS. شاركه للرجوع إليه. التحليل المحدد هو كما يلي:
جزء نمط CSS:
انسخ الرمز كما يلي: <style type = "text/css">
HTML ، الجسم {Overflow: Hidden ؛}
الجسم {الهامش: 0 ؛ حشو: 0 ؛}
Pre {color: Green ؛ Padding: 10px 15px ؛ الخلفية: #f0f0f0 ؛ الحدود: 1px منقط #333 ؛ الخط: 12px/1.5 Courier جديد ؛ الهامش: 12px ؛}
span {color:#999 ؛}
#box {الموضع: absolute ؛ top: 50px ؛ اليسار: 300px ؛ العرض: 100px ؛ الارتفاع: 100px ؛ الخلفية: أحمر ؛}
</style>
جزء JS:
انسخ الرمز كما يلي: <script type = "text/javaScript">
window.onload = function ()
{
var obox = document.getElementById ("box") ؛
var bleft = btop = bright = bbottom = bctrlkey = false ؛
setInterval (function ()
{
إذا (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 = event || window.event ؛
bctrlkey = event.ctrlkey ؛
التبديل (Event.KeyCode)
{
الحالة 37:
bleft = صحيح ؛
استراحة؛
الحالة 38:
إذا (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 = صحيح ؛
استراحة؛
الحالة 39:
مشرق = صحيح ؛
استراحة؛
الحالة 40:
إذا (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 = صحيح ؛
استراحة؛
الحالة 49:
bctrlkey && (obox.style.background = "green") ؛
استراحة؛
الحالة 50:
bctrlkey && (obox.style.background = "Yellow") ؛
استراحة؛
الحالة 51:
bctrlkey && (obox.style.background = "Blue") ؛
استراحة؛
}
العودة كاذبة
} ؛
document.onkeyup = وظيفة (حدث)
{
التبديل ((الحدث || window.event) .KeyCode)
{
الحالة 37:
bleft = false ؛
استراحة؛
الحالة 38:
btop = خطأ ؛
استراحة؛
الحالة 39:
مشرق = خطأ ؛
استراحة؛
الحالة 40:
bbottom = خطأ ؛
استراحة؛
}
} ؛
// منع الفائض
حد الوظيفة ()
{
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"> </viv>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.