要完成此效果需要两个步骤
第一步：把如下代码加入到<head>区域中
<style>
#menuShow{
border: 1px solid #666666;
background-color: #111111;
padding: 13px;
font-size: 13px;
font-family: Verdana, Arial;
position: absolute;
width: auto;
height: auto;
}
#menuSelect{
border: 1px solid #666666;
background-color: #111111;
padding: 13px;
font-size: 13px;
font-family: Verdana, Arial;
position: absolute;
width: auto;
height: auto;
}
</style>
第二步：把如下代码加入到<body>区域中
<div id="menuSelect" style="height: 0; left: 0; top: 0; width: 0"> <a href="#" onClick="moveOnMenu();moveOffSelector()">
<img src="../wydh/images/icon.gif" width="28" height="28" border="0"></a> </div>
<div id="menuShow" style="left: 0; top: 0; width: 0; height: 0"> <a href="#" onClick="moveOffMenu();moveOnSelector()">
<img src="../wydh/images/icon.gif" width="28" height="28" border="0"></a> <br>
<br>
<a href="http://www.jojoo.net">LINKA</a><br>
<a href="http://www.jojoo.net">LINKB</a><br>
<a href="http://www.jojoo.net">LINKC</a><br>
<br>
<a href="http://www.jojoo.net">LINKD</a><br>
<a href="http://www.jojoo.net">LINKE</a><br>
<br>
<a href="http://www.jojoo.net">LINKF</a><br>
<a href="http://www.jojoo.net">LINKG</a><br>
<a href="http://www.jojoo.net">LINKH</a><br>
</div>
<script>
Show ="yes";
var OffX = -150;
var PosX = 0;
var PosY = 0;
var speed = 1;
var increment = 1;
var incrementNS4 = 5;
var is_NS = navigator.appName=="Netscape";
var is_Ver = parseInt(navigator.appVersion);
var is_NS4 = is_NS&&is_Ver>=4&&is_Ver<5;
var is_NS5up = is_NS&&is_Ver>=5;
var MenuX = OffX;
var SelX = PosX;
var sPosX = PosX;
var sOffX = OffX;
if (Show == "yes") {
sPosX = OffX;
sOffX = PosX;
MenuX = sOffX;
SelX = sPosX;
}
if (is_NS4) {
increment = incrementNS4;
Lq = "document.layers.";
Sq = "";
eval(Lq+'menuSelect'+Sq+'.left=sPosX');
eval(Lq+'menuShow'+Sq+'.left=sOffX');
eval(Lq+'menuSelect'+Sq+'.top=PosY');
eval(Lq+'menuShow'+Sq+'.top=PosY');
} else {
Lq = "document.all.";
Sq = ".style";
document.getElementById('menuSelect').style.left = sPosX+"px";
document.getElementById('menuShow').style.left = sOffX+"px";
document.getElementById('menuSelect').style.top = PosY+"px";
document.getElementById('menuShow').style.top = PosY+"px";
}
function moveOnMenu() {
if (MenuX < PosX) {
MenuX = MenuX + increment;
if (is_NS5up) {
document.getElementById('menuShow').style.left = MenuX+"px";
} else {
eval(Lq+'menuShow'+Sq+'.left=MenuX');
}
setTimeout('moveOnMenu()',speed);
}
}
function moveOffMenu() {
if (MenuX > OffX) {
MenuX = MenuX - increment;
if (is_NS5up) {
document.getElementById('menuShow').style.left = MenuX+"px";
} else {
eval(Lq+'menuShow'+Sq+'.left=MenuX');
}
setTimeout('moveOffMenu()',speed);
}
}
function moveOffSelector() {
if (SelX > OffX) {
SelX = SelX - increment;
if (is_NS5up) {
document.getElementById('menuSelect').style.left = SelX+"px";
} else {
eval(Lq+'menuSelect'+Sq+'.left=SelX');
}
setTimeout('moveOffSelector()',speed);
}
}
function moveOnSelector() {
if (SelX < PosX) {
SelX = SelX + increment;
if (is_NS5up) {
document.getElementById('menuSelect').style.left = SelX+"px";
} else {
eval(Lq+'menuSelect'+Sq+'.left=SelX');
}
setTimeout('moveOnSelector()',speed);
}
}
// End -->
</script>
减小字体
增大字体
