코드 캡슐화가 완료되었습니다
응원해주신 모든 분들께 감사드립니다!
일부 Flash 사이트의 메뉴도 참고해서
자바스크립트로 흉내냈는데 효과가 꽤 멋집니다.
간단히 사용법만 적으면 됩니다.
1단계: 구체화합니다. X- 메뉴 클래스
사용법:
var <엔티티 변수>.new CoolMenuControl()
2단계: 메뉴 항목 생성 ---
사용법:
< ;엔티티 변수>.insertmenu(유형, Html 코드, 링크 URL, 대상)
유형: 0은 메뉴 제목, 1은 트리 메뉴 하위 항목, 2는 가로 메뉴 하위 항목을 나타냅니다.
HTML 코드 : 메뉴의 HTML 코드로 표시됩니다.
링크 URL: 말할 것도 없이 URL 또는 자바스크립트 스크립트입니다.
대상: 기본적으로 비어 있으며 이 페이지에서 열리지 않습니다. "_blank"는 새 페이지에서 열림을 의미합니다.
예:
CoolMenu2.insertmenu("2","
Sina","http://www .sina.com.cn /","_blank")
3단계: 메뉴 생성 ---
사용법:
<엔티티 변수>.init(엔티티 변수 이름, 테두리 색상, 배경 색상, 슬라이딩 속도, 배경 투명도)
'엔티티 변수 이름'은 <엔티티 변수>와 동일해야 합니다.
배경 색상="투명"이 완전히 투명한 경우
예:
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+"'>";
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
+'';
//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> <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="아주 멋진 JS 메뉴 effect_javascript 기술" > 横向菜单","","")
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif alt="아주 멋진 JS 메뉴 effect_javascript 기술" > 新浪网","http://www.sina.com.cn/","_blank")
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif alt="아주 멋진 JS 메뉴 effect_javascript 기술" > 我的雅虎","http://cn.yahoo.com/","_blank")
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif alt="아주 멋진 JS 메뉴 effect_javascript 기술" > 亿唐","http://www.etang.com/","_blank")
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif alt="아주 멋진 JS 메뉴 effect_javascript 기술" > 21世纪","http://www.21cn.com/","_blank")
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif alt="아주 멋진 JS 메뉴 effect_javascript 기술" > 游侠网","http://www.ali213.net/","_blank")
CoolMenu3.insertmenu("0","<img src=http://bbs.dvbbs.net/Skins/Default/nofollow.gif alt="아주 멋진 JS 메뉴 effect_javascript 기술" > 树形菜单","","")
CoolMenu3.insertmenu("0","<img src=http://www.blueidea.com/img/common/logo.gif alt="아주 멋진 JS 메뉴 effect_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>[Ctrl A 모두 선택 참고: <script>CoolMenu1.init("CoolMenu1","#002000","#38FFff",0.1,15)</script>외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 <script>CoolMenu2.init("CoolMenu2","#002000","#00FF80",0.2,10)</script>]<script>CoolMenu3.init("CoolMenu3","#002000","#f0FF00",0.3,25)</script>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
