JS special effect code-a Cool JS menu Effect

<Script>

Function CoolMenuControl (){

// ----- Regular variables ---
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 = "";

// ----- Menu item ---
Function menuitem (type, value, url, target ){
This. type = type
This. value = value
This. url = url
This.tar get = target
}

// ----- Insert menu ---
This. insertmenu = function (type, value, url, target ){
This. menuarray [this. menuarray. length] = new menuitem (type, value, url, target)
}

// ----- Preliminary test of the program ---
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 }.tar get + '"'> '+ this. menuarray [I]. value
}
Else
{
Inhtml + = '<tr> <td colspan =' + t + 'class = ht onmouseover = ''+ name + '. href = "'{this.menuarray? I =.url=', '{this.menuarray= I }.tar get + '"'> '+ 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 }.tar get + '"'> '+ this. menuarray [I]. value
}
Else
{
Inhtml + = '<tr> <td width = 6> <td colspan =' + t + 'onmouseover = ''+ name + '. href = "'{this.menuarray? I =.url=', '{this.menuarray= I }.tar get + '"'> '+ 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 }.tar get + '"'> '+ this. menuarray [I]. value;
Fcell = false
}
Else
{
Inhtml + = '<td width = 6> <td onmouseover = ''+ name + '. href = "'{this.menuarray? I =.url=', '{this.menuarray= I }.tar get + '"'> '+ 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)
}

// ----- Click hyper-connect ---
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]}
}

// ----- Slide processing ---
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;
}

// ----- Slide out ---
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
}
}

// ----- Absolute positioning ---
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
}

// ----- About ---
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 = # dddddddd)
Progid: DXImageTransform. Microsoft. Shadow (direction = 135, color = # cccccc, strength = 3 );
}
. Ht {
Font-weight: bold
}
</Style>
<! --
Step 1: materialized X-Menu class
Usage:
Var <entity variable>. new CoolMenuControl ()
--->
<Script language = "javascript">
Var CoolMenu1 = new CoolMenuControl ()
Var about = new Array ()
About [0] = "about X-Menu nnAuthor: PuterJamnCopyright 2004n reprint please notify me"
About [1] = "about author nn" This guy is very lazy and has nothing left !! "

</Script>
</Head>
<Body>
<! --
Step 2: Create a menu project ---
 
Usage:
<Entity variable>. insertmenu (type, Html code, link URL, target)
Type: 0 indicates the menu title, 1 indicates the tree menu sub-project, and 2 indicates the horizontal Menu Sub-project.
Html code: Html code displayed on the menu
Link URL: Needless to say, URL or Javascript script
Target: empty by default, which is not opened on this page; "_ blank" indicates opening on a new page
For example:
CoolMenu2.insertmenu ("2", " Sina", "http://www.sina.com.cn/", "_ blank ")
-->
<Script>
CoolMenu1.insertmenu ("2", "Homepage ","","")
CoolMenu1.insertmenu ("2", "News Center", "http://www.sina.com.cn/", "_ blank ")
CoolMenu1.insertmenu ("2", "Article center", "http://cn.yahoo.com/", "_ blank ")
CoolMenu1.insertmenu ("2", "IMG", "http://www.etang.com/", "_ blank ")
CoolMenu1.insertmenu ("2", "software download", "http://www.21cn.com/", "_ blank ")
CoolMenu1.insertmenu ("2", "Entertainment", "http://www.ali213.net/", "_ blank ")
</Script>

<! --
Step 3: Create a menu ---
 
Usage:
<Object variable>. init (object variable name, border color, background color, sliding speed, and translucent background)
'Object variable name' must be the same as <object variable>
If the background color = "transparent" is completely transparent
For example:
CoolMenu1.init ("CoolMenu1", "#002000", "#38 FFff", 0.1, 15)
-->
<Script> CoolMenu1.init ("CoolMenu1", "#002000", "#38 FFff", 0.1, 15) </script>
</Body>