A Cool JS menu effect _ javascript skills

A Cool JS menu effect code is encapsulated.
Thank you for your support!
For more information, see the menu of some Flash sites,
I used javascript to simulate one, and the effect was Cool.

Write a simple instruction:
Step 1: materialized X-Menu class
Usage:
Var <实体变量> . New CoolMenuControl ()

Step 2: Create a menu project ---

Usage:
<实体变量> . 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 ","
Step 3: Create a menu ---

Usage:
<实体变量> . Init (entity variable name, border color, background color, sliding speed, background translucent)
The 'object variable name' must be <实体变量> Same
If the background color = "transparent" is completely transparent
For example:
CoolMenu1.init ("CoolMenu1", "#002000", "#38 FFff", 0.1, 15)

Script function CoolMenuControl () {// ----- regular variable --- 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. menup_name; this. menutable_name; this. ml = 0; this. menuarray = new Array (); this. speed; this. href = ""; // ----- menu item --- function menuitem (typ E, 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. Menup_name = name + "menup" 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 = "" + "<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> </p> "; 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 cl Ass = 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 g Et + '"\'> '+ 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 = '<p id =' + this. menup_name + 'onmousemove = "'+ name + '. doOver () "> '+' <table id = '+ this. menutable_name + 'border = "0" cellpadding = "2" class = "menu" cellspacing = "4"> '+ inhtml +' </table> </p> '; // ale Rt (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 hyperjoin --- 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 (percent X> 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 position --- 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 <pead> <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-collaps E: 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 CoolMenu2 = new CoolMenuControl () var CoolMenu3 = new CoolMenuControl () var about = new Array () about [0] = "about X-Menu \ n \ nAuthor: puterJam \ nCopyright 2004 \ n reprint please inform me "about [1] =" about the author \ n \ "This guy is very lazy, nothing left !! \ "\ N but welcome to talk with me Javascript \ nQQ: 10644570 \ nE-Mail: PuterJam@etang.com" script "</pead> <body> <! -- Step 2: Create a menu item --- 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 Html code of the horizontal Menu Sub-Project: link URL of Html code displayed on the menu: Needless to say, URL or Javascript script target: blank by default, which is not opened on this page; "_ blank" indicates opening a new page, for example, CoolMenu2.insertmenu ("2", "xinlang net "," http://www.sina.com.cn/ "," _ Blank ") --> script CoolMenu1.insertmenu (" 0 "," Welcome to X-Menu (Menu Demonstration) Made By PuterJam ","","") coolMenu1.insertmenu ("0 ",""," http://www.blueidea.com/ "," _ Blank ") CoolMenu2.insertmenu (" 0 "," Horizontal menu "," "," ") CoolMenu2.insertmenu (" 2 "," xinlang "," http://www.sina.com.cn/ "," _ Blank ") CoolMenu2.insertmenu (" 2 "," My Yahoo "," http://cn.yahoo.com/ "," _ Blank ") CoolMenu2.insertmenu (" 2 "," Yi Tang "," http://www.etang.com/ "," _ Blank ") CoolMenu2.insertmenu (" 2 "," 21st Century "," http://www.21cn.com/ "," _ Blank ") CoolMenu2.insertmenu (" 2 "," youxia "," http://www.ali213.net/ "," _ Blank ") CoolMenu3.insertmenu (" 0 "," tree menu "," "," ") CoolMenu3.insertmenu (" 0 ",""," http://www.blueidea.com/ "," _ Blank ") CoolMenu3.insertmenu (" 1 "," about X-Menu "," javascript: alert (about [0]) "," ") coolMenu3.insertmenu ("1", "about Author", "javascript: alert (about [1])", "") CoolMenu3.insertmenu ("1", "Contact Me", "mailto: puterJam@etang.com "," ") CoolMenu3.insertmenu (" 1 "," your browser version "," javascript: alert (navigator. appName) "," ") script <! -- Step 3: Create a menu --- usage: <object variable>. init (entity variable name, border color, background color, sliding speed, background translucent) the 'entity variable name' must be the same as the <entity 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, script, CoolMenu2.init ("CoolMenu2", "#002000", "#00FF80", 0.2, 10) script, script, CoolMenu3.init ("CoolMenu3 ", "#002000", "# f0FF00", 0.3, 25) script </body>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]