?? 實例14.推拉式菜單.html
字號:
<style>#Cai1 {
BACKGROUND-COLOR: #336699;
BORDER-BOTTOM: white 2px outset;
BORDER-LEFT: white 2px outset;
BORDER-RIGHT: white 2px outset;
BORDER-TOP: white 2px outset; LEFT: 0px;
POSITION: absolute; TOP: 70px; VISIBILITY: hidden;
WIDTH: 200px; layer-background-color: lightblue
}
</style>
<script language="javascript">
<!--
function menuIn() { // 菜單隱藏
clearTimeout(out_ID) // 清除定時器
if( menu.pixelLeft > menuW*-1+20 ) {
menu.pixelLeft -= 2 // 菜單位置遞減
in_ID = setTimeout("menuIn()", 1) // 啟動定時器
}
}
function menuOut() { // 菜單出現
clearTimeout(in_ID) // 清除定時器
if( menu.pixelLeft < 0) {
menu.pixelLeft += 2 // 菜單位置遞增
out_ID = setTimeout("menuOut()", 1) // 啟動定時器
}
}
function cOver() {
clearTimeout(F_out)
F_over = setTimeout("menuOut()", 10)
}
function cOut() {
clearTimeout(F_over)
F_out = setTimeout("menuIn()", 10)
}
function init() {
menu = Cai1.style
menuW = Cai1.offsetWidth
Cai1.style.pixelLeft = menuW*-1+20 // 設置菜單初始位置
Cai1.onmouseover = cOver // 鼠標劃過時調用cOver函數
Cai1.onmouseout = cOut // 鼠標離開時調用cOut函數
Cai1.style.visibility = "visible" // 顯示圖層
}
F_over=F_out=in_ID=out_ID=null
//-->
</script>
</head>
<body onload="init()">
<div id="Cai1">
<table border="0">
<tr>
<td width=40> </td><td align="center"><font style="COLOR: #ffffff">菜單</font></td>
</tr>
<tr>
<td width=40> </td><td><a href="http://www.sina.com.cn"><font color="#cccccc" size=2>新浪網</font></a></td>
</tr>
</tr>
<td width=40> </td><td><a href="http://www.sohu.com"><font color="#cccccc" size=2>搜狐</font></a></td>
</tr>
<tr>
<td width=40> </td><td><a href="http://www.163.com"><font color="#cccccc" size=2>網易</font></a></td>
</tr>
</table>
</div>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -