案例:HTML DOM案例     状态:可编辑再运行    进入竖版
 运行结果 
x
<table id="myMenu" class="nav" width="150" onmouseover="showmenu()" onmouseout="hidemenu()">
 
1
<html>
2
<head>
3
<style>
4
body{font-family:arial;}
5
a{color:black;text-decoration:none;font:bold}
6
a:hover{color:#606060}
7
td.menu{background:lightblue}
8
9
table.nav
10
{
11
background:black;
12
position:relative;
13
font: bold 80% arial;
14
top:0px;
15
left:-135px;
16
}
17
</style>
18
<script type="text/javascript">
19
var i=-135
20
var intHide
21
var speed=3
22
function showmenu()
23
{
24
clearInterval(intHide)
25
intShow=setInterval("show()",10)
26
}
27
function hidemenu()
28
{
29
clearInterval(intShow)
30
intHide=setInterval("hide()",10)
31
}
32
function show()
33
{
34
if (i<-12)
35
    {
36
    i=i+speed
37
    document.getElementById('myMenu').style.left=i
38
    }
39
}
40
function hide()
41
{
42
if (i>-135)
43
    {
44
    i=i-speed
45
    document.getElementById('myMenu').style.left=i
46
    }
47
}
48
</script>