บทความนี้อธิบายวิธีการใช้ JS เพื่อเลื่อนลงเพื่อซ่อนเมนู แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<html>
<head>
<title> เมนูที่ซ่อนอยู่ที่ซ่อนอยู่ที่มุมซ้ายบนของหน้าเว็บตรวจจับการเลื่อนเมาส์ลง </title>
<style>#d1 {
พื้นหลังสี: สีน้ำเงิน;
ขอบด้านล่าง: สีขาว 2px เริ่มต้น;
ชายแดนซ้าย: สีขาว 2px เริ่มต้น;
ชายแดนขวา: สีขาว 2px เริ่มต้น;
ชายแดนด้านบน: สีขาว 2px เริ่มต้น;
ซ้าย: 0px; ตำแหน่ง: สัมบูรณ์;
ด้านบน: 0px; ทัศนวิสัย: ซ่อน;
ความกว้าง: 300px;
เลเยอร์พื้นหลังสี-สี: LightGreen
-
A {Font-Size: 9pt; Color:#000000}
A: Link {Text-Decoration: None}
A: Hover {Text-Decoration: None; Color: #FFFFFF}
A: เยี่ยมชม {การกำหนดข้อความ: ไม่มี}
.40pt {ตัวอักษรขนาด: 40pt; สี:#ub39a1; Font-Family: Wending Amber ดั้งเดิม}
</style>
<ภาษาสคริปต์ = "JavaScript">
ฟังก์ชั่น menuin () // เมนูซ่อน
-
ถ้า (N4) {
ClearTimeout (out_id)
if (menu.top> menuh*-1+20+10) {
menu.top -= 8
in_id = settimeout ("menuin ()", 1)
-
อื่นถ้า (menu.top> menuh*-1+20) {
เมนู. ท็อป-
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)
-
-
-
ฟังก์ชั่น menuout () // การแสดงเมนู
-
ถ้า (N4) {
ClearTimeout (in_id)
if (menu.top <-10) {
menu.top += 4
out_id = settimeout ("menuout ()", 1)
-
อื่นถ้า (menu.top <0) {
เมนู. ท็อป ++
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
เมนู Visibility = "มองเห็นได้"
-
อื่นถ้า (e4) {
เมนู = d1.style
menuh = d1.offSetheight
d1.style.pixeltop = d1.offsetheight*-1+20
d1.onmouseover = fireover
d1.onmouseout = fireout
d1.style.visibility = "มองเห็นได้"
-
-
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">
<table>
<tbody>
<tr>
<td align = "middle" bgcolor = "ub39a1" rowspan = "2"> <b style = "สี: ub39a1">
M <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>
</tr>
<tr>
<td align = "ขวา" colspan = "2">
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน