编辑您的代码:提交代码

x
 
1
 
2
 
3
<html>
4
<head>
5
<style>
6
body{font-family:arial;}
7
a{color:black;text-decoration:none;font:bold}
8
a:hover{color:#606060}
9
td.menu{background:lightblue}
10
11
table.nav
12
{
13
background:black;
14
position:relative;
15
font: bold 80% arial;
16
top:0px;
17
left:-135px;
18
margin-left:3px;
19
}
20
</style>
21
<script type="text/javascript">
22
var i=-135
23
var c=0
24
var intHide
25
var speed=3
26
function show_hide_menu()
27
{
28
if (c==0)
29
    {
30
    c=1
31
    clearInterval(intHide)
32
    intShow=setInterval("show()",10)
33
    }
34
else
35
    {
36
    c=0
37
    clearInterval(intShow)
38
    intHide=setInterval("hide()",10)
39
    }
40
}
41
function show()
42
{
43
if (i<-12)
44
    {
45
    i=i+speed
46
    document.getElementById('myMenu').style.left=i
47
    }
48
}
49
function hide()
50
{
51
if (i>-135)
52
    {
53
    i=i-speed
54
    document.getElementById('myMenu').style.left=i
55
    }
56
}
57
</script>
58
</head>
59
60
<body>
61
<table id="myMenu" class="nav" width="150" onclick="show_hide_menu()">
62
<tr><td class="menu"><a href="/index.html">HOME</a></td>
63
<td rowspan="5" align="center" bgcolor="#FF8080">M<br />E<br />N<br />U</td></tr>
64
<tr><td class="menu"><a href="/asp/index.asp">ASP</a></td></tr>
65
<tr><td class="menu"><a href="/js/index.asp">JavaScript</a></td></tr>
66
<tr><td class="menu"><a href="/dhtml/index.asp">DHTML</a></td></tr>
67
<tr><td class="menu"><a href="/vbscript/index.asp">VBScript</a></td></tr>
68
</table>
69
70
<p>请点击 MENU,来显示这个菜单。</p>
71
<p>可以尝试修改脚本中的 "speed" 变量,来改变菜单的滑动速度。</p>
72
</body>
73
</html>
74
            

查看结果:

请在上面的文本框中编辑您的代码,然后单击提交按钮测试结果。w3c0.com

W3c0.com 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。W3c0 简体中文版的所有内容仅供测试,对任何法律问题及风险不承担任何责任。 当使用本站时,代表您已接受了本站的使用条款和隐私条款。版权所有,保留一切权利。 鲁ICP备15022115号