一个很Cool的JS菜单效果

2020-05-11 我要评论

代码封装完成啦
在这里谢谢大家对我的支持！
偶参照一些Flash站点的菜单,
用javascript仿了一个,效果还是挺Cool的.

简单地写一个使用说明:
第一步：实体化X-Menu类
   用法:
   var <实体变量>.new CoolMenuControl()

第二步：建立菜单项目---

  用法:
    <实体变量>.insertmenu(类型,Html代码,链接网址,目标)
    　类型：０代表菜单标题，１代表树型菜单子项目，２代表横向菜单子项目
    　Html代码：显示在菜单上的Html代码
      链接网址：不用多说了，网址或Javascript脚本
      目标：默认为空，既不在本页打开；"_blank"代表在新的页面打开
　例如:
    CoolMenu2.insertmenu("2","<img src=https://img.qb5200.com/download-x/20200511/26349.gif> 新浪网","http://www.sina.com.cn/","_blank")  　

第三步：建立菜单---

  用法:
    <实体变量>.init(实体变量名,边框颜色,背景颜色,滑动速度,背景半透明度)
       '实体变量名'必须与<实体变量>相同
       如果背景颜色="transparent"既为完全透明
　例如:
    CoolMenu1.init("CoolMenu1","#002000","#38FFff",0.1,15)

//-----常规变量--- 
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>' 
        +'<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 onerror="javascript:this.src='/skin1/img/error.jpg';" src=http://bbs.dvbbs.net/Skins/Default/nofollow.gif> 横向菜单","","") 
CoolMenu2.insertmenu("2","<img onerror="javascript:this.src='/skin1/img/error.jpg';" src=https://img.qb5200.com/download-x/20200511/26349.gif> 新浪网","http://www.sina.com.cn/","_blank") 
CoolMenu2.insertmenu("2","<img onerror="javascript:this.src='/skin1/img/error.jpg';" src=https://img.qb5200.com/download-x/20200511/26349.gif> 我的雅虎","http://cn.yahoo.com/","_blank") 
CoolMenu2.insertmenu("2","<img onerror="javascript:this.src='/skin1/img/error.jpg';" src=https://img.qb5200.com/download-x/20200511/26349.gif> 亿唐","http://www.etang.com/","_blank") 
CoolMenu2.insertmenu("2","<img onerror="javascript:this.src='/skin1/img/error.jpg';" src=https://img.qb5200.com/download-x/20200511/26349.gif> 21世纪","http://www.21cn.com/","_blank") 
CoolMenu2.insertmenu("2","<img onerror="javascript:this.src='/skin1/img/error.jpg';" src=https://img.qb5200.com/download-x/20200511/26349.gif> 游侠网","http://www.ali213.net/","_blank")

CoolMenu3.insertmenu("0","<img onerror="javascript:this.src='/skin1/img/error.jpg';" src=http://bbs.dvbbs.net/Skins/Default/nofollow.gif> 树形菜单","","") 
CoolMenu3.insertmenu("0","<img onerror="javascript:this.src='/skin1/img/error.jpg';" 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 全选注:如需引入外部Js需刷新才能执行]

关联的Select，可以支持客户端动态更新

猜您喜欢

05-11多附件上传组件演示
05-11一个很简单的办法实现TD的加亮效果.
05-11Javascript 不能释放内存.
05-11一些有关检查数据的JS代码
05-11b/s开发常用javaScript技术
05-11加入收藏夹代码（兼容 gecko）
05-11Mozilla中显示textarea中选择的文字
05-11showModelessDialog()使用详解
05-11Javascript 事件捕获的备忘(setCapture,captureEvents)
05-11图片完美缩放
05-11prototype class详解
05-11javascript的函数
05-11IE中jscript/javascript的条件编译
05-11prototype 1.5 & scriptaculous 1.6.1 学习笔记
05-11彪哥1.1(智能表格)提供下载
05-11js输入中文效果
05-11js-穷举法 (y0h)
05-11快速判断某个值是否在select中的方法

一个很Cool的JS菜单效果

相关文章

猜您喜欢

今日热门