一个很Cool的JS菜单效果- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 一个很Cool的JS菜单效果

技术文章搜索

关键字

Javascript 中的一个很Cool的JS菜单效果

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 64 ::

收藏到网摘: n/a

多附件上传组件演示打造个性化的Select(可编辑)

代码封装完成啦
在这里谢谢大家对我的支持！
偶参照一些Flash站点的菜单,
用javascript仿了一个,效果还是挺Cool的.
简单地写一个使用说明:
第一步：实体化X-Menu类
用法:
var <实体变量>.new CoolMenuControl()
第二步：建立菜单项目---
用法:
<实体变量>.insertmenu(类型,Html代码,链接网址,目标)
　类型：０代表菜单标题，１代表树型菜单子项目，２代表横向菜单子项目
　Html代码：显示在菜单上的Html代码
链接网址：不用多说了，网址或Javascript脚本
目标：默认为空，既不在本页打开；"_blank"代表在新的页面打开
　例如:
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif> 新浪网","http://www.sina.com.cn/","_blank") 　
第三步：建立菜单---
用法:
<实体变量>.init(实体变量名,边框颜色,背景颜色,滑动速度,背景半透明度)
'实体变量名'必须与<实体变量>相同
如果背景颜色="transparent"既为完全透明
　例如:
CoolMenu1.init("CoolMenu1","#002000","#38FFff",0.1,15)

点击运行可以看到效果:

<script>
function CoolMenuControl(){
//-----常规变量---
this.lastScrollX=0;
this.lastScrollY=0;
this.lastScrollW=0;
this.lastScrollH=0;
this.td_X=0;
this.td_Y=0;
this.td_W=0;
this.td_H=0;
this.td=0;
this.mouseon=0;
this.current=null
this.hk_name;
this.hktable_name;
this.menudiv_name;
this.menutable_name;
this.ml=0;
this.menuarray=new Array();
this.speed;
this.href="";
//-----菜单项目---
function menuitem(type,value,url,target){
this.type=type
this.value=value
this.url=url
this.target=target
}
//-----插入菜单---
this.insertmenu=function(type,value,url,target){ this.menuarray[this.menuarray.length]=new menuitem(type,value,url,target)
}
//-----程序初试化---
this.init=function(name,bdc,bgc,speed,Alpha){
var inhtml=""
var cellcount=0
var lastcellcount=0
this.hk_name=name+"hk"
this.hktable_name=name+"hktable"
this.menudiv_name=name+"menudiv"
this.menutable_name=name+"menutable"
this.speed=speed
for (i=0;i<this.menuarray.length;i++) { if (this.menuarray[i].type=="2") cellcount=cellcount+1 if (this.menuarray[i].type=="1" || this.menuarray[i].type=="0") {cellcount=0} if (lastcellcount<cellcount) {lastcellcount++} }
//alert(cellcount)
stylecode="cursor:hand;filter:Alpha(style=0,opacity="+Alpha+");background-color:"+bgc
suspendcode="<DIV id="+this.hk_name+" style='POSITION:absolute;' onclick='"+name+".doClick()'>" +"<table id="+this.hktable_name+" border='1' width='0' cellspacing='0' style='border-collapse: collapse' bordercolor='"+bdc+"'>" +"<tr><td height='18' style='"+stylecode+"'></td></tr></table></div>";
document.write(suspendcode);
var fcell=true
for (i=0;i<this.menuarray.length;i++)
{ switch(this.menuarray[i].type) { case "0": t=cellcount*2 if (t<=0) { inhtml+='<tr><td colspan=2 class=ht onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value } else { inhtml+='<tr><td colspan='+t+' class=ht onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value } fcell=true break; case "1": t=(cellcount-1)*2 if (t<=0) { inhtml+='<tr><td width=6><td onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value } else { inhtml+='<tr><td width=6><td colspan='+t+' onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value } fcell=true break; case "2": if (fcell) { inhtml+='<tr><td width=6><td onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value; fcell=false } else { inhtml+='<td width=6><td onmouseover=\''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"\'>'+this.menuarray[i].value; } break; }
}
inhtml='<div id='+this.menudiv_name+' onmousemove="'+name+'.doOver()">' +'<table id='+this.menutable_name+' border="0" cellpadding="2" class="menu" cellspacing="4">' +inhtml +'</table></div>';
//alert(inhtml)
document.write(inhtml);
this.lastScrollX=0;
this.lastScrollY=-4;
this.posXY(eval(this.menutable_name).cells[0])
this.td_W=eval(this.menutable_name).cells[0].scrollWidth+6
this.td_H=eval(this.menutable_name).cells[0].scrollHeight
setInterval(name+".scrollback()",1)
}
//-----单击超连接---
this.doClick=function(){ //alert(this.url) var url=this.href.split(",") //alert(url[0]) //alert(url[1])
if (url[0]=="") return
if (url[1]=="_blank") {window.open(url[0])} else {location.href=url[0]}
}
//-----滑动处理---
this.scrollback=function(){
diffX=this.td_X-3
diffY=this.td_Y-5
diffW=this.td_W
diffH=this.td_H
percentX=this.speed*(diffX-this.lastScrollX);
percentY=this.speed*(diffY-this.lastScrollY);
percentW=this.speed*(diffW-this.lastScrollW);
percentH=this.speed*(diffH-this.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);
eval(this.hk_name).style.pixelTop+=percentY;
eval(this.hk_name).style.pixelLeft+=percentX;
eval(this.hktable_name).style.pixelWidth+=percentW;
eval(this.hktable_name).style.pixelHeight+=percentH;
this.lastScrollX=this.lastScrollX+percentX;
this.lastScrollY=this.lastScrollY+percentY;
this.lastScrollW=this.lastScrollW+percentW;
this.lastScrollH=this.lastScrollH+percentH;
}
//-----滑出---
this.doOver=function() { if (event.srcElement.tagName=="TD") { if (event.srcElement.innerText.length==0 || event.srcElement.innerText=="|") return this.posXY(event.srcElement) this.td_W=event.srcElement.scrollWidth+6 this.td_H=event.srcElement.scrollHeight }
}
//-----绝对定位---
this.posXY=function(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; } this.td_X=hk_left this.td_Y=hk_top
}
//-----关于---
this.about=function(){
alert("OK")
}
}
</script>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<style>
.b{color=#000066;cursor:hand}
.menu {
font-family:Arial;
cursor:Default;
font-size:12px;
border:1px #000000 solid;
border-collapse: collapse;
filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#ffffff, endcolorstr=#dddddd) progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#cccccc,strength=3);
}
.ht{
font-weight:bold
}
</style>
<script language="javascript">
var CoolMenu1=new CoolMenuControl()
var CoolMenu2=new CoolMenuControl()
var CoolMenu3=new CoolMenuControl()
var about=new Array()
about[0]="关于X-Menu菜单\n\nAuthor:PuterJam\nCopyright 2004\n转载请通知本人"
about[1]="关于作者\n\n\"这家伙很懒，什么也没留下！！\"\n不过欢迎大家和我交流Javascript\nQQ:10644570\nE-Mail:PuterJam@etang.com"
</script>
</head>
<body>
<script>
CoolMenu1.insertmenu("0","欢迎使用X-Menu (菜单演示) <font style='font-weight:lighter;'>Made By PuterJam</font>","","")
CoolMenu1.insertmenu("0"," ","http://www.blueidea.com/","_blank")
CoolMenu2.insertmenu("0","<img src=http://bbs.dvbbs.net/Skins/Default/nofollow.gif> 横向菜单","","")
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif> 新浪网","http://www.sina.com.cn/","_blank")
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif> 我的雅虎","http://cn.yahoo.com/","_blank")
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif> 亿唐","http://www.etang.com/","_blank")
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif> 21世纪","http://www.21cn.com/","_blank")
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif> 游侠网","http://www.ali213.net/","_blank")
CoolMenu3.insertmenu("0","<img src=http://bbs.dvbbs.net/Skins/Default/nofollow.gif> 树形菜单","","")
CoolMenu3.insertmenu("0","<img src=http://www.blueidea.com/img/common/logo.gif> ","http://www.blueidea.com/","_blank")
CoolMenu3.insertmenu("1","关于X-Menu菜单","javascript:alert(about[0])","")
CoolMenu3.insertmenu("1","关于作者","javascript:alert(about[1])","")
CoolMenu3.insertmenu("1","联系我","mailto:PuterJam@etang.com","")
CoolMenu3.insertmenu("1","你的浏览器版本","javascript:alert(navigator.appName)","")
</script>
<script>CoolMenu1.init("CoolMenu1","#002000","#38FFff",0.1,15)</script>
<script>CoolMenu2.init("CoolMenu2","#002000","#00FF80",0.2,10)</script>
<script>CoolMenu3.init("CoolMenu3","#002000","#f0FF00",0.3,25)</script>
</body>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

多附件上传组件演示打造个性化的Select(可编辑)

评论 (0) All