Heim  >  Artikel  >  Web-Frontend  >  一个很Cool的JS菜单效果_javascript技巧

一个很Cool的JS菜单效果_javascript技巧

WBOY
WBOYOriginal
2016-05-16 19:26:231193Durchsuche

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

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

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

  用法:
    .insertmenu(类型,Html代码,链接网址,目标)
     类型:0代表菜单标题,1代表树型菜单子项目,2代表横向菜单子项目
     Html代码:显示在菜单上的Html代码
      链接网址:不用多说了,网址或Javascript脚本
      目标:默认为空,既不在本页打开;"_blank"代表在新的页面打开
 例如:     
    CoolMenu2.insertmenu("2","一个很Cool的JS菜单效果_javascript技巧 新浪网","http://www.sina.com.cn/","_blank")   

第三步:建立菜单---

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

"; document.write(suspendcode); var fcell=true for (i=0;i'+this.menuarray[i].value } else { inhtml+=' '+this.menuarray[i].value } fcell=true break; case "1": t=(cellcount-1)*2 if (t '+this.menuarray[i].value } else { inhtml+=' '+this.menuarray[i].value } fcell=true break; case "2": if (fcell) { inhtml+=' '+this.menuarray[i].value; fcell=false } else { inhtml+=' '+this.menuarray[i].value; } break; } } inhtml='
' +'' +inhtml +'
'; //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> CoolMenu1.insertmenu("0","欢迎使用X-Menu (菜单演示) <font style='font-weight:lighter;'>Made By PuterJam","","") CoolMenu1.insertmenu("0"," ","http://www.blueidea.com/","_blank") CoolMenu2.insertmenu("0","<img src=http://bbs.dvbbs.net/Skins/Default/nofollow.gif alt="一个很Cool的JS菜单效果_javascript技巧" > 横向菜单","","") CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif alt="一个很Cool的JS菜单效果_javascript技巧" > 新浪网","http://www.sina.com.cn/","_blank") CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif alt="一个很Cool的JS菜单效果_javascript技巧" > 我的雅虎","http://cn.yahoo.com/","_blank") CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif alt="一个很Cool的JS菜单效果_javascript技巧" > 亿唐","http://www.etang.com/","_blank") CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif alt="一个很Cool的JS菜单效果_javascript技巧" > 21世纪","http://www.21cn.com/","_blank") CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif alt="一个很Cool的JS菜单效果_javascript技巧" > 游侠网","http://www.ali213.net/","_blank") CoolMenu3.insertmenu("0","<img src=http://bbs.dvbbs.net/Skins/Default/nofollow.gif alt="一个很Cool的JS菜单效果_javascript技巧" > 树形菜单","","") CoolMenu3.insertmenu("0","<img src=http://www.blueidea.com/img/common/logo.gif alt="一个很Cool的JS菜单效果_javascript技巧" > ","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>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn