网页特效——由键盘调动的菜单_网页特效

搜索

范文分类

网页特效——由键盘调动的菜单
[查看演示]

这个也是藏在边上的菜单，但它却是用键盘调动的
而且其文字属性相当稳定，不受浏览器干扰
由于菜单本身没有设置带文字的边条，读者可能一时找不到它
实际使用时最好在页面上写上一段提示语
可惜在 Netscape 上派不上用场
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<style>#menu{ BORDER-RIGHT: red 8px solid; BORDER-TOP: green 5px solid; LEFT: 0px; FONT: 12px/18px Verdana; BORDER-LEFT: green 5px solid; WIDTH: 100px; BORDER-BOTTOM: green 5px solid; POSITION: absolute; TOP: 10px; BACKGROUND-COLOR: lightyellow; layer-background-color: lightyellow}</style>

<script language="JavaScript1.2">
<!--
function showtip(nulling){
if (document.all){
if (nulling==0&&menu.style.pixelLeft==-90) // ==-缩回宽度
menu.title=按“X”键拉出菜单，按“Z”键隐藏菜单
else
menu.title=
}
else if (document.layers){
if (nulling==0&&!window.pullit)
window.status=按“X”键拉出菜单，按“Z”键隐藏菜单
else
window.status=
}
}
if (document.all)
document.write(<div id="menu" style="left:-92" onMouseover="showtip(0)" onMouseout="showtip(1)">) // left: -缩回宽度
</script>
<LAYER id="slidemenubar" onmouseover="showtip(0)" onmouseout="showtip(1)">
<script language="JavaScript1.2">
var sitems=new Array()
var sitemlinks=new Array()

// 在这里增减链接项目的文字
sitems[0]="文字链接点01"
sitems[1]="文字链接点02"
sitems[2]="文字链接点03"
sitems[3]="文字链接点04"
sitems[4]="文字链接点05"
sitems[5]="文字链接点06"
sitems[6]="文字链接点07"
sitems[7]="文字链接点08"
sitems[8]="文字链接点09"
sitems[9]="文字链接点10"

// 在这里增减对应的链接目标
sitemlinks[0]="URL"
sitemlinks[1]="URL"
sitemlinks[2]="URL"
sitemlinks[3]="URL"
sitemlinks[4]="URL"
sitemlinks[5]="URL"
sitemlinks[6]="URL"
sitemlinks[7]="URL"
sitemlinks[8]="URL"
sitemlinks[9]="URL"

for (i=0;i<=sitems.length-1;i++)
document.write(<a href="/blog/+sitemlinks[i]+>";+sitems[i]+</a><br>)
</script>
</LAYER>
<script
language="JavaScript1.2">

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.menu.style
rightboundary=0
leftboundary=-92 // 缩回宽度
}
else{
themenu=document.layers.slidemenubar
rightboundary=92 // 缩回宽度
leftboundary=10
}
function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",50)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",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 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)
}

if (document.layers)
document.captureEvents(Event.KEYPRESS)
function menuengine(e){
if (document.layers){
if (e.which==120)
pull()
if (e.which==122)
draw()
}
else if (document.all){
if (event.keyCode==120)
pull()
if (event.keyCode==122)
draw()
}
}
document.onkeypress=menuengine
</script>

<title>由键盘调动的菜单</title>
</head>

<body>
<div align="center"><center>

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td valign="top"><p align="center" style="line-height: 16px"><span style="font-size: 10pt"><font
face="Times New Roman" color="#FF0000">X<br>
</font><font color="#FF0000">拉<br>
出<br>
菜<br>
单<br>
，<br>
</font><font face="Times New Roman" color="#FF0000">Z<br>
</font><font color="#FF0000">隐<br>
藏<br>
菜<br>
单</font></span></td>
<td width="100%"><p align="center"><font color="#C0C0C0"><span style="font-size: 18pt">网页特效——由键盘调动的菜单</span></font></p>
<p align="center"><span style="font-size: 11pt"><font face="Times New Roman"
color="#C0C0C0">(</font><font color="#C0C0C0">仅兼容</font><font face="Times New Roman"
color="#C0C0C0">IE)</font></span></p>
<p style="line-height: 21px" align="center"><span style="font-size: 11pt">这个也是藏在边上的菜单，但它却是用键盘调动的<br>
而且其文字属性相当稳定，不受浏览器干扰<br>
由于菜单本身没有设置带文字的边条，读者可能一时找不到它<br>
实际使用时最好在页面上写上一段提示语<br>
可惜在 <font face="Times New Roman">Netscape </font>上派不上用场</span></p>
<p style="line-height: 21px" align="center"><a href="http://yeships.myrice.com"><span
style="font-size: 9pt"><font color="#C0C0C0">您的朋友：</font><font
face="Times New Roman" color="#C0C0C0">LAMSIR</font></span></a></td>
<td></td>
</tr>
</table>
</center></div>

<p> </p>
</body>
</html>