تصف هذه المقالة طريقة استخدام JS للانزلاق لأسفل لإخفاء القوائم. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
نسخة الكود كما يلي:
<html>
<head>
<title> قائمة مخفية مخبأة في الزاوية اليسرى العلوية من صفحة الويب ، مستشعرًا على شرائح الماوس لأسفل </title>
<style>#d1 {
لون الخلفية: الأزرق.
Border-Bottom: أبيض 2 بكسل.
الحدود اليسرى: أبيض 2 بكسل.
اليمين الحدودي: أبيض 2 بكسل.
أعلى الحدود: أبيض 2 بكسل.
اليسار: 0px ؛ الموقف: مطلق ؛
أعلى: 0px ؛ الرؤية: مخفية ؛
العرض: 300 بكسل ؛
طبقة الخلفية اللون: Lightgreen
}
A {Font-Size: 9pt ؛ Color:#000000}
ج: الارتباط {text-decoration: none}
a: hover {text-decoration: none ؛ color: #ffffff}
ج: زيارة {text-decoration: none}
.40pt {font-size: 40pt ؛ color:#ub39a1 ؛ font-family: Wing Amber Traditional}
</style>
<script language = "javaScript">
وظيفة القائمة () // إخفاء القائمة
{
إذا (n4) {
ClearTimeout (Out_id)
if (menu.top> menuh*-1+20+10) {
menu.top -= 8
in_id = setTimeout ("menuin ()" ، 1)
}
آخر if (menu.top> menuh*-1+20) {
Menu.top--
in_id = setTimeout ("menuin ()" ، 1)
}
}
آخر {
ClearTimeout (Out_id)
if (menu.pixeltop> menuh*-1+20+10) {
menu.pixeltop -= 8
in_id = setTimeout ("menuin ()" ، 1)
}
آخر إذا (menu.pixeltop> menuh*-1+20) {
Menu.pixeltop--
in_id = setTimeout ("menuin ()" ، 1)
}
}
}
وظيفة القائمة () // عرض القائمة
{
إذا (n4) {
ClearTimeOut (in_id)
if (menu.top <-10) {
menu.top += 4
out_id = setTimeOut ("menuout ()" ، 1)
}
آخر إذا (menu.top <0) {
Menu.top ++
out_id = setTimeOut ("menuout ()" ، 1)
}
}
آخر {
ClearTimeOut (in_id)
if (menu.pixeltop <-10) {
menu.pixeltop += 2
out_id = setTimeOut ("menuout ()" ، 1)
}
آخر إذا (menu.pixeltop <0) {
menu.pixeltop ++
out_id = setTimeOut ("menuout ()" ، 1)
}
}
}
وظيفة Fireover () {
ClearTimeout (f_out)
f_over = setTimeout ("menuout ()" ، 10)
}
وظيفة Fireout () {
ClearTimeout (f_over)
f_out = setTimeout ("menuin ()" ، 10)
}
وظيفة init () {
إذا (n4) {
القائمة = document.d1
menuh = menu.document.height
menu.top = menu.document.height*-1+20
menu.onmouseover = menuout
menu.onmouseout = menuin
menu.visibility = "مرئي"
}
آخر إذا (e4) {
قائمة = d1.style
Menuh = d1.offsetheight
d1.style.pixeltop = d1.offsetheight*-1+20
D1.Onmouseover = Fireover
d1.onmouseout = fireout
d1.style.vibility = "مرئي"
}
}
f_over = f_out = in_id = out_id = null
N4 = (document.layers)؟ 1: 0
e4 = (document.all)؟ 1: 0 ؛
</script>
</head>
<body onload = "init ()">
<div id = "d1">
<griding>
<tbody>
<tr>
<td align = "middle" bgcolor = "ub39a1" rowspan = "2"> <b style = "color: ub39a1">
م <br>
e <br>
n <br>
u </b> </td>
<td> <br> <br> <ul>
<li> <a href = "#nogo">
الخيار 1 </a>
</li>
<li> <a href = "li#nogo">
الخيار 2 </a>
</li>
<li> <a href = "#nogo">
الخيار 3 </a>
</li>
<li> <a href = "#nogo">
الخيار 4 </a>
</li>
<li> <a href = "#nogo">
الخيار 5 </a>
</li>
</ul>
</td>
<td> <br> <br> <ul>
<li> <a href = "#nogo">
الخيار 6 </a>
</li>
<li> <a href = "#nogo">
الخيار 7 </a>
</li>
<li> <a href = "#nogo">
الخيار 8 </a>
</li>
<li> <a href = "#nogo">
الخيار 9 </a>
</li>
<li> <a href = "#nogo">
الخيار 10 </a>
</li>
</ul>
</td>
</r>
<tr>
<td align = "right" colspan = "2">
</td>
</r>
</tbody>
</table>
</div>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.