HTML DOM案例 - W3xue在线HTML/CSS/JS运行工具

<html>
<head>
<style>
body{font-family:arial;}
table{background:black;position:absolute;}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightgreen}
table.topnav{font-size:80%;top:0;left:0}
table.menu{font-size:100%;bottom:0;z-index:-1}
</style>
<script type="text/javascript">
var i=0
var c=0
var intHide
function show_hide_menu()
{
if (c==0)
	{
	clearInterval(intHide)
	intShow=setInterval("show()",10)
	c=1
	}
else
	{
	clearInterval(intShow)
	intHide=setInterval("hide()",10)
	c=0
	}
}
function show()
{
if (i>-100)
	{
	i=i-1
	document.all("menu").style.bottom=i
	}
}
function hide()
{
if (i<0)
	{
	i=i+1
	document.all("menu").style.bottom=i
	}
}
</script>

</head>
<body>

<p>请点击 MENU，您会看到菜单的选项。</p>

</body>
</html>

​x
   <tr><td class="menu"><a href="/html/oldhtml/">HTML</a></td></tr>
 
<html>
<head>
<style>
body{font-family:arial;}
table{background:black;position:absolute;}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightgreen}
table.topnav{font-size:80%;top:0;left:0}
table.menu{font-size:100%;bottom:0;z-index:-1}
</style>
<script type="text/javascript">
var i=0
var c=0
var intHide
function show_hide_menu()
{
if (c==0)
    {
    clearInterval(intHide)
    intShow=setInterval("show()",10)
    c=1
    }
else
    {
    clearInterval(intShow)
    intHide=setInterval("hide()",10)
    c=0
    }
}
function show()
{
if (i>-100)
    {
    i=i-1
    document.all("menu").style.bottom=i
    }
}
function hide()
{
if (i<0)
    {
    i=i+1
    document.all("menu").style.bottom=i
    }
}
</script>
​