熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

JS特效代碼--一個很Cool的JS菜單效果

2013-11-15 11:57:01  來源: JSP教程 

  <script>

  function CoolMenuControl(){

  //常規變量
thislastScrollX=;
thislastScrollY=;
thislastScrollW=;
thislastScrollH=;
thistd_X=;
thistd_Y=;
thistd_W=;
thistd_H=;
thistd=;
thismouseon=;
thiscurrent=null
thishk_name;
thishktable_name;
thismenudiv_name;
thismenutable_name;
thisml=;
thismenuarray=new Array();
thisspeed;
thishref="";

  //菜單項目
function menuitem(typevalueurltarget){
thistype=type
thisvalue=value
thisurl=url
thistarget=target
}

  //插入菜單
thisinsertmenu=function(typevalueurltarget){
 thismenuarray[thismenuarraylength]=new menuitem(typevalueurltarget)
}

  //程序初試化
thisinit=function(namebdcbgcspeedAlpha){ 
var inhtml=""
var cellcount=
var lastcellcount=
thishk_name=name+"hk"
thishktable_name=name+"hktable"
thismenudiv_name=name+"menudiv"
thismenutable_name=name+"menutable"
thisspeed=speed

  for (i=;i<thismenuarraylength;i++)
 {
 if (thismenuarray[i]type=="") cellcount=cellcount+
 if (thismenuarray[i]type=="" || thismenuarray[i]type=="") {cellcount=}
 if (lastcellcount<cellcount) {lastcellcount++}
 
 }

  //alert(cellcount)

  stylecode="cursor:hand;filter:Alpha(style=opacity="+Alpha+");backgroundcolor:"+bgc

  suspendcode="<DIV id="+thishk_name+" style=POSITION:absolute; onclick="+name+"doClick()>"
 +"<table id="+thishktable_name+" border= width= cellspacing= style=bordercollapse: collapse bordercolor="+bdc+">"
 +"<tr><td height= style="+stylecode+"></td></tr></table></div>";
documentwrite(suspendcode);
var fcell=true
for (i=;i<thismenuarraylength;i++)
{
 switch(thismenuarray[i]type)
 {
 case "":
 t=cellcount*
 if (t<=
 {
 inhtml+=<tr><td colspan= class=ht onmouseover=+name+href="+thismenuarray[i]url++thismenuarray[i]target+">+thismenuarray[i]value
 }
 else
 {
 inhtml+=<tr><td colspan=+t+ class=ht onmouseover=+name+href="+thismenuarray[i]url++thismenuarray[i]target+">+thismenuarray[i]value
 }
 fcell=true
 break;
 case "":
 t=(cellcount)*
 if (t<=
 {
 inhtml+=<tr><td width=><td onmouseover=+name+href="+thismenuarray[i]url++thismenuarray[i]target+">+thismenuarray[i]value
 }
 else
 {
 inhtml+=<tr><td width=><td colspan=+t+ onmouseover=+name+href="+thismenuarray[i]url++thismenuarray[i]target+">+thismenuarray[i]value
 }
 fcell=true
 break;
 
 case "":
 if (fcell)
 {
 inhtml+=<tr><td width=><td onmouseover=+name+href="+thismenuarray[i]url++thismenuarray[i]target+">+thismenuarray[i]value;
 fcell=false
 }
 else
 {
 inhtml+=<td width=><td onmouseover=+name+href="+thismenuarray[i]url++thismenuarray[i]target+">+thismenuarray[i]value;
 }
 break;
 }
}
inhtml=<div id=+thismenudiv_name+ onmousemove="+name+doOver()">
 +<table id=+thismenutable_name+ border="" cellpadding="" class="menu" cellspacing="">
 +inhtml
 +</table></div>;
//alert(inhtml)
documentwrite(inhtml);

  thislastScrollX=;
thislastScrollY=;
thisposXY(eval(thismenutable_name)cells[])
thistd_W=eval(thismenutable_name)cells[]scrollWidth+ 
thistd_H=eval(thismenutable_name)cells[]scrollHeight
setInterval(name+"scrollback()")
}

  //單擊超連接
thisdoClick=function(){
 //alert(thisurl)
 var url=thishrefsplit("")
 //alert(url[])
 //alert(url[])
if (url[]=="") return

  if (url[]=="_blank")
 {windowopen(url[])}
 else
 {locationhref=url[]}
}

  //滑動處理
thisscrollback=function(){
diffX=thistd_X
diffY=thistd_Y
diffW=thistd_W
diffH=thistd_H
percentX=thisspeed*(diffXthislastScrollX);
percentY=thisspeed*(diffYthislastScrollY);
percentW=thisspeed*(diffWthislastScrollW);
percentH=thisspeed*(diffHthislastScrollH);

  if(percentX>)percentX=Mathceil(percentX);
else percentX=Mathfloor(percentX);
if(percentY>)percentY=Mathceil(percentY);
else percentY=Mathfloor(percentY);
if(percentW>)percentW=Mathceil(percentW);
else percentW=Mathfloor(percentW);
if(percentH>)percentH=Mathceil(percentH);
else percentH=Mathfloor(percentH);

  eval(thishk_name)stylepixelTop+=percentY;
eval(thishk_name)stylepixelLeft+=percentX;
eval(thishktable_name)stylepixelWidth+=percentW;
eval(thishktable_name)stylepixelHeight+=percentH;

  thislastScrollX=thislastScrollX+percentX;
thislastScrollY=thislastScrollY+percentY;
thislastScrollW=thislastScrollW+percentW;
thislastScrollH=thislastScrollH+percentH;
}

  //滑出
thisdoOver=function() {
 if (eventsrcElementtagName=="TD") {
 if (eventsrcElementinnerTextlength== || eventsrcElementinnerText=="|") return
 thisposXY(eventsrcElement)
 thistd_W=eventsrcElementscrollWidth+ 
 thistd_H=eventsrcElementscrollHeight
 }
}

  //絕對定位
thisposXY=function(obj){
 hk_left=objoffsetLeft
 hk_top=objoffsetTop
 vParent = objoffsetParent;
 
 while (vParenttagNametoUpperCase() != "BODY")
 {
 hk_left += vParentoffsetLeft;
 hk_top += vParentoffsetTop;
 vParent = vParentoffsetParent;
 }
 
 thistd_X=hk_left
 thistd_Y=hk_top
}

  //關於
thisabout=function(){
alert("OK")
}

  }
</script>

  <head>
<meta httpequiv="ContentLanguage" content="zhcn">
<style>
b{color=#;cursor:hand}
menu {
fontfamily:Arial;
cursor:Default;
fontsize:px;
border:px # solid;
bordercollapse: collapse;
filter:progid:DXImageTransformMicrosoftGradient(gradienttype= startcolorstr=#ffffff endcolorstr=#dddddd)
 progid:DXImageTransformMicrosoftShadow(direction=color=#ccccccstrength=);
}
ht{
fontweight:bold
}
</style>
<!
第一步實體化XMenu類
 用法:
 var <實體變量>new CoolMenuControl()
>
<script language="javascript">
var CoolMenu=new CoolMenuControl()
var about=new Array()
about[]="關於XMenu菜單nnAuthor:PuterJamnCopyright n轉載請通知本人"
about[]="關於作者nn"這家伙很懶什麼也沒留下!!"

  </script>
</head>
<body>
<!
第二步建立菜單項目
 
 用法:
 <實體變量>insertmenu(類型Html代碼鏈接網址目標)
  類型0代表菜單標題1代表樹型菜單子項目2代表橫向菜單子項目
  Html代碼顯示在菜單上的Html代碼
 鏈接網址不用多說了網址或Javascript腳本
 目標默認為空既不在本頁打開"_blank"代表在新的頁面打開
例如: 
 CoolMenuinsertmenu("""<img src=http://wwwblueideacom/img/icon/arrowgif> 新浪網"""_blank")  
>
<script>
CoolMenuinsertmenu("""本站首頁""""")
CoolMenuinsertmenu("""新聞中心"""_blank")
CoolMenuinsertmenu("""文章中心"""_blank")
CoolMenuinsertmenu("""圖片欣賞"""_blank")
CoolMenuinsertmenu("""軟件下載"""_blank")
CoolMenuinsertmenu("""娛樂欣賞"""_blank")
</script>

  <!
第三步建立菜單
 
 用法:
 <實體變量>init(實體變量名邊框顏色背景顏色滑動速度背景半透明度)
 實體變量名必須與<實體變量>相同
 如果背景顏色="transparent"既為完全透明
例如: 
 CoolMenuinit("CoolMenu""#""#FFff")  
>
<script>CoolMenuinit("CoolMenu""#""#FFff")</script>
</body>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19958.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.