📄 8-7.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> hidable float menu </TITLE>
<META http-equiv="content-type" CONTENT="text/html;charset=gb2312">
<META NAME="Author" CONTENT="CZH;czh44@sohu.com">
<style>
td
{
font-size:14;font-family:'宋体';color:black;text-align:center
}
a
{
color:black;
}
</style>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
/*--------------------------------\
| Authored by CZH;czh44@sohu.com |
\--------------------------------*/
var menu_width = 150; //菜单宽度
var show_width = 20;
var menu_top = 40; //菜单垂直方向坐标
var move_mode = 'smooth'; //平滑移动模式
//var move_mode = 'skip'; //跳跃移动模式
//添加菜单前面部分
function addMenuHeader()
{
content = "<div id='float_menu'";
content +="style='position:absolute;left:0;top:"+menu_top+";";
content +="z_index:50;width:"+eval(menu_width+20+2)+"'";
content +=" onmouseover='moveOut()' onmouseout='moveBack()'>";
content +="<table width='100%' cellpadding='0' cellspacing='1' bgcolor='#555555'>";
content +="<tr height='20'>";
content +="<td bgcolor='#eeffff' width='"+menu_width+"'>";
content +="菜单项</td>";
content +="<td bgcolor='#c0edcc' rowspan=50 width='"+eval(show_width+2)+"'>";
content +="大<br>学<br>链<br>接";
content +="</td></tr>";
document.write(content);
}
//添加菜单属部内容
function addMenuFoot()
{
content = "</table></div>";
document.write(content);
}
//添加菜单项
function addItem(text,url,target)
{
if(!target||target=='')
{
target="_blank";
}
content = "<tr height='20px'><td bgcolor='#eeeeff'>";
content +="<a href='"+url+"' target='"+target+"'>"+text;
content +="</a></td></tr>";
document.write(content);
}
function moveOut()
{
if(move_mode=='smooth')
{
moveOutSmooth();
}
else
{
moveOutSkip();
}
}
function moveBack()
{
if(move_mode=='smooth')
{
moveBackSmooth();
}
else
{
moveBackSkip();
}
}//平滑移出,即多步移出
function moveOutSmooth()
{
//使用style.left属性,要通过parseInt()方法取数值
now_pos = parseInt(document.getElementById('float_menu').style.left);
if(window.movingBack)
{
clearTimeout(movingBack); //停止移入动作
}
//判断是否完全移出
if(now_pos < 0)
{
//得到当前位置与目标位置之间的距离dx
dx = 0-now_pos;
//根据dx的值决定每步移动多少距离
if(dx>30)
document.getElementById('float_menu').style.left = now_pos+5;
else if(dx>10)
document.getElementById('float_menu').style.left = now_pos+2;
else
document.getElementById('float_menu').style.left = now_pos+1;
movingOut = setTimeout("moveOutSmooth()",5);
}
else
{
clearTimeout(window.movingOut); //移到位后,停止移出
}
}
//跳跃式移出,即一步移到位
function moveOutSkip()
{
//采用style.pixeleft属性,直接和数值进行比较,不需要采用parseInt()方法
if(document.getElementById('float_menu').style.pixelLeft<0)
document.getElementById('float_menu').style.pixelLeft = 0;
}
//平滑移入,即多步移入
function moveBackSmooth()
{
if(window.movingOut)
{
clearTimeout(movingOut); //停止移出动作
}
//判断是否隐藏到位
if(document.getElementById('float_menu').style.pixelLeft>eval(0-menu_width))
{
//得到当前位置与目标位置的距离dx
dx = document.getElementById('float_menu').style.pixelLeft-eval(0-menu_width);
//根据距离dx的大小,决定每步移动多大距离
if(dx>30)
document.getElementById('float_menu').style.pixelLeft -=5;
else if(dx>10)
document.getElementById('float_menu').style.pixelLeft -=2;
else
document.getElementById('float_menu').style.pixelLeft -=1;
movingBack = setTimeout("moveBackSmooth()",5);
}
else
{
clearTimeout(window.movingBack); //移到位后,停止移入
}
}
//跳跃式移入,即一步移到位
function moveBackSkip()
{
if(document.getElementById('float_menu').style.pixelLeft>eval(0-menu_width))
document.getElementById('float_menu').style.pixelLeft = eval(0-menu_width);
}
//初始化
function init()
{
addMenuHeader();
//根据需要,通过addItem()添加多个菜单项
addItem("电科技大","http://www.uestc.edu.cn","_blank");
addItem("清华大学","http://www.tsinghua.edu.cn","_blank");
addItem("北京大学","北京大学","_blank");
addItem("上海交大","http://www.sjtu.edu.cn","_blank");
addMenuFoot();
//设置菜单初始位置
document.getElementById('float_menu').style.left = - menu_width;
document.getElementById('float_menu').style.visibility = 'visible';
}
//-->
</SCRIPT>
<BODY>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
init();
//-->
</SCRIPT>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -