📄 ch11-151.txt
字号:
<HTML>
<HEAD>
<TITLE>菜单导航篇--滑出的菜单条</TITLE>
</HEAD>
<BODY bgcolor="#fef4d2" >
<br><br>
<center>
<font color="ffaafa"><h2>菜单导航篇--滑出的菜单条</h2></font>
<hr width=300>
<br><br>
<!-- 案例代码1开始 -->
<layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()">
<script language=JavaScript>
if (document.all) document.write('<div id="slidemenubar2" style="left:-150" onMouseover="pull()" onMouseout="draw()">')
var sitems=new Array()
<!-- [Step1]: 这里可以按序增加菜单条的名称 -->
sitems[0]="263 在线"
sitems[1]="新 浪 网"
sitems[2]="雅 虎 网"
sitems[3]="搜 狐 网"
<!-- [Step2]: 在此能够按序增加菜单名称的网址 -->
var sitemlinks=new Array()
sitemlinks[0]="http://www.263.net.cn"
sitemlinks[1]="http://www.sina.com.cn"
sitemlinks[2]="http://cn.yahoo.com"
sitemlinks[3]="http://www.sohu.com"
for (i=0;i<=sitems.length-1;i++)
document.write('<a href='+sitemlinks[i]+' ONMOUSEOVER="'+';return true;" ONMOUSEOUT="'+';return true;">'+sitems[i]+'</a><br>')
</script>
</layer>
<script language=JavaScript>
function regenerate(){window.location.reload()}
function regenerate2(){if (document.layers) setTimeout("window.onresize=regenerate",400)}
window.onload=regenerate2
if (document.all){
document.write('</div>')
themenu=document.all.slidemenubar2.style
rightboundary=0
leftboundary=-150}
else{
themenu=document.layers.slidemenubar
rightboundary=150
leftboundary=10
}
function pull(){
if (window.drawit) clearInterval(drawit)
pullit=setInterval("pullengine()",50)
}
function pullengine(){
if (document.all&&themenu.pixelLeft<rightboundary) themenu.pixelLeft+=5
else if(document.layers&&themenu.left<rightboundary) themenu.left+=5
else if (window.pullit) clearInterval(pullit)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",50)
}
function drawengine(){
if (document.all&&themenu.pixelLeft>leftboundary) themenu.pixelLeft-=5
else if(document.layers&&themenu.left>leftboundary) themenu.left-=5
else if (window.drawit) clearInterval(drawit)
}
</script>
<!-- 案例代码1结束 -->
<!-- 案例代码2开始 -->
<style>
A:hover{color:#ffff00}
A:visited:{color:#FF0000}
<!-- [Step3]: 在此能够修改菜单条的宽度 -->
<!-- [Step4]: 这里可以更改菜单条的初始位置 -->
<!-- [Step5]: 在此能够设置菜单条的背景颜色 -->
#slidemenubar, #slidemenubar2{position:absolute;width:170px;left:-155px;top:170px;border:1.5px solid red;background-color:#9999FF;font:bold 12px Helvetica;line-height:14px;}
</style>
<!-- 案例代码2结束 -->
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -