超经典，超酷javascript菜单，三人行推荐！-IT技术精粹[JiShuBu.Com]-倾力打造一流IT技术平台！

IT技术精粹[JiShuBu.Com]-倾力打造一流IT技术平台！

超经典，超酷javascript菜单，三人行推荐！

您现在正在浏览：首页 > JavaScript >

超经典，超酷javascript菜单，三人行推荐！

作者：　发布时间：2007-12-22 18:15:17　来源：

菜单一

<script>
lastScrollX=0;
lastScrollY=0;
offerX=-5;
offerY=10;
td_X=0;
td_Y=0;
td=0;
mouseon=0;
url=null;
taget=null;
suspendcode="<DIV id=yuzi style='right:12px;POSITION:absolute;TOP:12px;' onclick='doClick()'>"
+"<table id=menu border='1' width='106' cellspacing='0' style='border-collapse: collapse' bordercolor='#008000'>"
+"<tr><td height='18' class='trans_msg' bgcolor='#80FF00'></td></tr></table></div>";
document.write(suspendcode);
lastScrollX=0;
lastScrollY=-4;
var current=null
function scrollback(){
diffX=td_X+8
diffY=td_Y-1
percentX=.08*(diffX-lastScrollX);
percentY=.08*(diffY-lastScrollY);
if(percentX>0)percentX=Math.ceil(percentX);
else percentX=Math.floor(percentX);
if(percentY>0)percentY=Math.ceil(percentY);
else percentY=Math.floor(percentY);
document.all.yuzi.style.pixelTop+=percentY;
document.all.yuzi.style.pixelLeft+=percentX;
lastScrollX=lastScrollX+percentX;
lastScrollY=lastScrollY+percentY;
}
function doOver() {
mouseon=1
if (event.srcElement.tagName=="TD") {
url=event.srcElement.url
taget=event.srcElement.taget
if (url.match("javascript")==null) window.status=url
td_X=event.srcElement.offsetLeft
td_Y=event.srcElement.offsetTop
menu.width=event.srcElement.scrollWidth+6
menu.height=event.srcElement.scrollHeight
}
}
function doOut(){
if (mouseon==0) {
td_X=mt.rows[0].offsetLeft
td_Y=mt.rows[0].offsetTop
}
}
function doClick(){
if (taget=="_blank")
window.open(url)
location.href=url
}
window.setInterval("scrollback()",1);
window.setInterval("doOut()",1000);
</script>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<style>
.trans_msg {cursor:hand;filter:progid:DXImageTransform.Microsoft.Alpha( style=0,opacity=25) blendtrans(duration=.25);}
.b{color=#000066;cursor:hand}
.f{font-family:Arial;cursor:Default;font-size:12px}
</style>
</head>
<body>
<div onmousemove="doOver()">
<table id=mt border="0" cellpadding="2" style="border-collapse: collapse;" bordercolor="#808080" class="f">
<tr><td class=b url="javascript:alert('大家好')" taget="">+Hello!<td url="#" taget="_blank">World!!
<tr><td class=b url="javascript:alert('我的邮箱:puterjam@etang.com')" taget="">+<b>联系我</b><td url="mailto:wld369@163.com" taget="_blank">PuterJam@etang.com
<tr><td class=b url=http://www.jishubu.com taget="_blank">+IT技术精粹<td url="javascript:alert(navigator.appVersion)" taget="">你的浏览器版本
<tr><td class=b url="http://cn.yahoo.com" taget="_blank">+Yahoo<td url="javascript:alert(navigator.appName)" taget="">你的浏览器名称
<tr><td class=b url="javascript:alert('谢谢支持')" taget="">+谢谢支持
<tr><td class=b url="#" taget="">+<b>作者:
</b>
<tr><td class=b url="#" taget="">+<b>舜子 PuterJam </b>
</table>
</div>
</body>

菜单二

<script>
var lastScrollX=0;
var lastScrollY=0;
var lastScrollW=0;
var lastScrollH=0;
var hk_left;
var hk_top;
var td_X=0;
var td_Y=0;
var td_W=0;
var td_H=0;
var td=0;
var mouseon=0;
suspendcode="<DIV id=yuzi style='right:12px;POSITION:absolute;TOP:12px;' onclick='doClick()'>"
+"<table id=menu border='1' width='106' cellspacing='0' style='border-collapse: collapse' bordercolor='#008000'>"
+"<tr><td height='18' class='trans_msg' bgcolor='#80FF00'></td></tr></table></div>";
document.write(suspendcode);
lastScrollX=0;
lastScrollY=-4;
var current=null
function scrollback(){
diffX=td_X-3
diffY=td_Y-16
diffW=td_W
diffH=td_H
percentX=.08*(diffX-lastScrollX);
percentY=.08*(diffY-lastScrollY);
percentW=.08*(diffW-lastScrollW);
percentH=.08*(diffH-lastScrollH);
if(percentX>0)percentX=Math.ceil(percentX);
else percentX=Math.floor(percentX);
if(percentY>0)percentY=Math.ceil(percentY);
else percentY=Math.floor(percentY);
if(percentW>0)percentW=Math.ceil(percentW);
else percentW=Math.floor(percentW);
if(percentH>0)percentH=Math.ceil(percentH);
else percentH=Math.floor(percentH);
document.all.yuzi.style.pixelTop+=percentY;
document.all.yuzi.style.pixelLeft+=percentX;
menu.style.pixelWidth+=percentW;
menu.style.pixelHeight+=percentH;
lastScrollX=lastScrollX+percentX;
lastScrollY=lastScrollY+percentY;
lastScrollW=lastScrollW+percentW;
lastScrollH=lastScrollH+percentH;
}
function doOver() {
mouseon=1
if (event.srcElement.tagName=="TD") {
if (event.srcElement.innerText.length==0 || event.srcElement.innerText=="|") return
posXY(event.srcElement)
td_W=event.srcElement.scrollWidth+6
td_H=event.srcElement.scrollHeight
}
}
function posXY(obj){
hk_left=obj.offsetLeft
hk_top=obj.offsetTop
vParent = obj.offsetParent;
while (vParent.tagName.toUpperCase() != "BODY")
{
hk_left += vParent.offsetLeft;
hk_top += vParent.offsetTop;
vParent = vParent.offsetParent;
}
td_X=hk_left
td_Y=hk_top
}
function doOut(){
if (mouseon==0) {
posXY(mt.cells[0])
td_W=mt.cells[0].scrollWidth+6
td_H=mt.cells[0].scrollHeight
}
}
window.setInterval("scrollback()",1);
</script>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<style>
.trans_msg {cursor:hand;filter:progid:DXImageTransform.Microsoft.Alpha( style=0,opacity=25) blendtrans(duration=.25);}
.b{color=#000066;cursor:hand}
.menubar {
font-family:Arial;
cursor:Default;
font-size:12px;
border:1px #000000 solid;
filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#ffffff, endcolorstr=#dddddd)
progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#cccccc,strength=3);
}
</style>
</head>
<body onload="doOut()">
<div id=menudiv onmousemove="doOver()" align="center">
<table id=mt border="0" cellpadding="2" style="border-collapse: collapse;" bordercolor="#808080" class="menubar" cellspacing="4">
<tr><td colspan=30><b>横向菜单</b>
<tr><td width=6><td>文件<td width=6><td>编辑<td width=6><td>工具<td width=6><td>窗口<td width=6><td>帮助
<tr><td colspan=30><b>纵向菜单</b>
<tr><td width=6><td colspan=10>我的E-Mail:PuterJam@etang.com
<tr><td width=6><td colspan=10>登陆新浪网
<tr><td width=6><td colspan=10>登陆蓝色理想论坛</table>
</div>　
</body>

【评论】【加入收藏夹】【大中小】【打印】【关闭】

※ 相关信息

无相关信息

发表评论

用户名:	密码:
验证码:	匿名发表

文章搜索

[添加文章] [管理文章]

最新技术文档

·中国移动188号段将于1月8日起在深圳正式放号

·PHP与Javascript的两种交互方式

·使用wordpress中的函数 (PHP)

·js倒计时效果-精确到秒 (Javascript)

·PHP无刷新删除数据

·PHP文件系统处理类

·PHP文件缓存数据类

·PHPMailer邮件类利用smtp.163.com发送邮件方

·PHP的POST方式

·md5 结合 crypt ＝无敌密码

技术文档排行榜

·天气预报小偷，根据IP自动判断地址

·超经典计算机使用问题105答

·CSS网页布局入门教程：下拉及多级弹出式菜单

·'AjaxPro'未定义错误的原因&javascript顺

·[初学者必读]网页制作之HTML基础知识

·DIV&CSS打造自动伸展三栏复合布局

·近1000本javascript电子图书下载列表

·CSS 文字樣式技巧 (摘自一台湾网站，确实很

·阿里妈妈广告的投放技巧

·ajax+php无刷新二级联动下拉菜单(省市联动)