船长 发表于 2009-02-05 11:23 | 分类：javascript | 阅读数：338 次
超酷JS圆形浮动菜单代码如下：
<html> <head> <title>www.songlecn.com</title> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css"> body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#000; left:0; top:0; width:100%; height:100%;} .obj {position:absolute;font-size:1px;left:-1000;cursor:pointer;} .chi {position:absolute;cursor:pointer;font-family:verdana;} </style> <script type="text/javascript"><!-- //////////////////////////////////////////////////////////////////// // ================ MENU CONTENT =================================== HDM = [ ['SAURISCHIANS', 'THEROPODS<br>Bipedal<br>predators', 'Herrerasauria', 'Saltopodidae', 'Saltopus'], ['', '', '', '', 'Eoraptor'], ['', '', '', 'Staurikosaurus', ''], ['', '', '', 'Herrerasaurus', ''], ['', '', 'Ceratosauria', 'Coelophysids', 'Coelophysis'], ['', '', '', '', 'Saltopus'], ['', '', '', 'Ceratosaurus', ''], ['', '', '', 'Podokesaurus', ''], ['', '', '', 'Abelisaurids', 'Abelisaurus'], ['', '', '', '', 'Indosaurus'], ['', '', '', 'Noasaurus', ''], ['', '', '', 'Segisauridae', 'Segisaurus'], ['', '', '', '', 'Dilophosaurus'], ['', '', 'Coelurosauria', 'Coelurids', 'Coelurus'], ['', '', '', '', 'Ornitholestes'], ['', '', '', 'Dryptosaurus', ''], ['', '', '', 'Compsognathus', ''], ['', '', '', 'Oviraptor', ''], ['', '', '', 'Caenagnathids', 'Caenagnathus'], ['', '', '', '', 'Microvenator'], ['', '', '', 'Avimimus', ''], ['', '', '', 'Ornithomimus', ''], ['', '', '', 'Garudimimids', 'Garudimimus'], ['', '', '', '', 'Harpymimus'], ['', '', '', 'Deinocheirus', ''], ['', '', '', 'Dromaeosaurids', 'Caudipteryx'], ['', '', '', '', 'Deinonychus'], ['', '', '', '', 'Dromaeosaurus'], ['', '', '', '', 'Protarchaeopteryx'], ['', '', '', '', 'Sinornithosaurus'], ['', '', '', '', 'Sinosauropteryx'], ['', '', '', '', 'Unenlagia'], ['', '', '', '', 'Utahraptor'], ['', '', '', '', 'Velociraptor'], ['', '', '', 'Tyrannosaurids', 'Tyrannosaurus'], ['', '', '', '', 'Albertosaurus'], ['', '', '', '', 'Nanotyrannus'], ['', '', 'Carnosauria', 'Allosaurids', 'Allosaurus'], ['', '', '', '', 'Yangchuanosaurus'], ['', '', '', 'Carcharodontosaurids', 'Carcharodontosaurus'], ['', '', '', '', 'Giganotosaurus'], ['', '', '', 'Spinosaurus', ''], ['', '', '', 'Baryonyx', ''], ['', '', '', 'Megalosaurids', 'Megalosaurus'], ['', '', '', '', 'Altispinax'], ['', '', '', '', 'Erectopus'], ['', '', 'Segnosauria', 'Therizinosaurus', ''], ['', '', '', 'Segnosaurus', ''], ['', 'SAUROPODS<br>Quadrupedal<br>herbivorous', 'Prosauropoda', 'Anchisaurus', ''], ['', '', '', 'Plateosaurus', ''], ['', '', '', 'Melanorosaurus', ''], ['', '', '', 'Massospondylus', ''], ['', '', 'Sauropoda', 'Cetiosaurus', ''], ['', '', '', 'Camarasaurus', ''], ['', '', '', 'Dicraeosaurids', 'Amargasaurus'], ['', '', '', '', 'Dicraeosaurus'], ['', '', '', '', 'Rebbachisaurus'], ['', '', '', 'Euhelopodus', ''], ['', '', '', 'Titanosaurids', 'Aegyptosaurus'], ['', '', '', '', 'Alamosaurus'], ['', '', '', '', 'Andesaurus'], ['', '', '', '', 'Argentinosaurus'], ['', '', '', '', 'Hypselosaurus'], ['', '', '', '', 'Quaesitosaurus'], ['', '', '', '', 'Saltasaurus'], ['', '', '', '', 'Titanosaurus'], ['', '', '', 'Diplodocids', 'Diplodocus'], ['', '', '', '', 'Apatosaurus'], ['', '', '', '', 'Barosaurus'], ['', '', '', '', 'Supersaurus'], ['', '', '', '', 'Seismosaurus'], ['', '', '', 'Brachiosaurids', 'Astrodon'], ['', '', '', '', 'Brachiosaurus'], ['', '', '', '', 'Ultrasauros'], ['ORNITHISCHIANS', 'ORNITHOPODS<br>herbivorous', 'Fabrosauria', 'Fabrosaurids', 'Fabrosaurus'], ['', '', '', '', 'Lesothosaurus'], ['', '', '', '', 'Xiaosaurus'], ['', '', '', 'Heterodontosaurus', ''], ['', '', 'Ornithopoda', 'Hypsilophodon', ''], ['', '', '', 'Dryosaurus', ''], ['', '', '', 'Iguanodontids', 'Iguanodon'], ['', '', '', '', 'Ouranosaurus'], ['', '', '', '', 'Anoplosaurus'], ['', '', '', 'Camptosaurus', ''], ['', '', '', 'Hadrosaurids', 'Hadrosaurus'], ['', '', '', '', 'Maiasaura'], ['', '', '', '', 'Anatotitan'], ['', '', '', '', 'Edmontosaurus'], ['', '', '', '', 'Saurolophus'], ['', '', '', '', 'Trachodon'], ['', '', '', 'Lambeosaurids', 'Lambeosaurus'], ['', '', '', '', 'Bactrosaurus'], ['', '', '', '', 'Corythosaurus'], ['', '', '', '', 'Jaxartosaurus'], ['', '', '', '', 'Parasaurolophus'], ['', '', '', 'Thescelosaurus', ''], ['', 'MARGINOCEPHALIA<br>herbivorous', 'Pachycephalosauria', 'Pachycephalosaurids', 'Pachycephalosaurus'], ['', '', '', '', 'Stegoceras'], ['', '', '', '', 'Stygimoloch'], ['', '', '', 'Vannanosorus', ''], ['', '', 'Ceratopsia', 'Protoceratopsids', 'Protoceratops'], ['', '', '', '', 'Bagaceratops'], ['', '', '', '', 'Leptoceratops'], ['', '', '', '', 'Montanoceratops'], ['', '', '', '', 'Notoceratops'], ['', '', '', '', 'Zuniceratops'], ['', '', '', 'Ceratopsidae', 'Anchiceratops'], ['', '', '', '', 'Avaceratops'], ['', '', '', '', 'Arrhinoceratops'], ['', '', '', '', 'Brachyceratops'], ['', '', '', '', 'Ceratops'], ['', '', '', '', 'Monoclonius'], ['', '', '', '', 'Styracosaurus'], ['', '', '', '', 'Torosaurus'], ['', '', '', '', 'Triceratops'], ['', '', '', 'Psittacosaurus', ''], ['', 'THYREOPHORA<br>armored<br>quadrupeds', 'Scriptosoria', 'ObjectOrientus', 'MPietrus'], ['', '', '', '', 'G1Dootus', 'http://www.dhteumeuleu.com'], ['', '', '', '', 'Evolvus'], ['', '', '', 'Bizarrus', 'CybZarbius'], ['', '', '', '', 'JackFlashus'], ['', '', '', '', 'JimmyBeamus'], ['', '', 'Stegosauria', 'Huayangosaurus', ''], ['', '', '', 'Stegosaurinae', 'Stegosaurus'], ['', '', '', '', 'Dacentrurus'], ['', '', '', '', 'Kentrosaurus'], ['', '', '', '', 'Tuojiangosaurus'], ['', '', '', '', 'Yingshanosaurus'], ['', '', '', 'Craterosaurus', ''], ['', '', 'Ankylosauria', 'Nodosaurids', 'Nodosaurus'], ['', '', '', '', 'Acanthopholis'], ['', '', '', '', 'Brachyspondosaurus'], ['', '', '', '', 'Edmontonia'], ['', '', '', '', 'Hoplitosaurus'], ['', '', '', '', 'Minmi'], ['', '', '', '', 'Hylaeosaurus'], ['', '', '', '', 'Polacanthus'], ['', '', '', '', 'Sauropelta'], ['', '', '', '', 'Struthiosaurus'], ['', '', '', 'Ankylosaurus', ''] ]; // ============================================================ // ========== Experimental GALACTIC Menu ============= // SCRIPT by Gerard Ferrandez - Ge-1-doot - NOV 2001 // ============================================================ // -------- global var -------------- var nx; var ny; var xm = 0; var ym = 0; var nx2; var ny2; var cir; var E; var m; var HP = 0; var HS = new Array(); // =============================== var A = .0044; // rotation speed var Cselected = "#FF0000"; var Cnode = "#00FF00"; var Chyperlink = "#FFFF00"; var Cparent = "#0000FF"; // =============================== var cA = Math.cos(A); var sA = Math.sin(A); var Zoom = 0; var ZoomF = 1; var Xd = 0; var Yd = 0; var XdF = 0; var YdF = 0; var oB; var root; var tempx = 0; var tempy = 0; var drag = false; var hcli = false; // ------------------- main loop ------------------------------------------------------ function main(){ if(XdF >= Xd) Xd -= (Xd - XdF) *.1; else Xd += (XdF - Xd) *.1; if(YdF >= Yd) Yd -= (Yd - YdF) *.1; else Yd += (YdF - Yd) *.1; if(ZoomF > Zoom) Zoom -= (Zoom - ZoomF) *.05; else Zoom += (ZoomF - Zoom) *.05; m.rotate(); cir.left = oB.obj.pL - E - 3; cir.top = oB.obj.pT - E - 3; setTimeout(main, 16); } // ------------------------------------------------------------------------------------ function SFMenu(label, parent) { // ======== create Elements ========= obj = document.createElement("div"); obj.className="obj"; chi = document.createElement("div"); chi.className="chi"; chi.innerHTML = " " + label obj.appendChild(chi); document.body.appendChild(obj); // ======== Attributes ============ this.ref = obj; this.doot = obj.style; this.ola = chi.style; this.ref.obj = this; this.parent = parent; this.inscr = true; this.visible = true; this.pL = 0; this.pT = 0; this.m = new Array(); this.X = 0; this.Y = 0; this.lev = 0; this.w = 0; this.label = label; // ==================== functions ========================== // ------- children creation ------- this.dot = function(c) { this.m[this.m.length] = newItem = new SFMenu(c, this); newItem.lev = this.lev + 1; return newItem; } // ------- click Event ------------ this.ref.onmousedown = function() { hcli = true; with(this.obj){ if(m[0]){ url = m[0].label; if(url.indexOf("http")>=0){ window.open(url,"_blank"); } else { HS[HP++] = parent; oB = this; Mdoot(root,true); Mdoot(this.obj,false); XdF = X; YdF = Y; ZoomF = m[0].lev; } } } return false; } // --------- Rotation ------------ this.rotate = function () { with(this){ // --- look Ma! no hands! --- Ax = X - Xd; Ay = Y - Yd; X = Ax * cA - Ay * sA + Xd; Y = Ay * cA + Ax * sA + Yd; // ---- children rotation ------ for(var i=0 in m) m[i].rotate(); // --- exclude invisible dots if(visible){ pL = Zoom * (X - Xd) + nx2; pT = Zoom * (Y - Yd) + ny2; if(pL<0 || pL>nx || pT<0 || pT>ny){ if(inscr){ inscr = false; doot.left = -1E4; return; } } else inscr = true; // --- move doots if(inscr){ doot.left = pL - w * .25; doot.top = pT - w * .25; } } } } } // ---- transfer & colors ------------- function Mdoot(o,s){ with(o){ if(s){ // --- Graphic Attributs w = Math.max(2,Math.min(64,(12 - lev * 2) * (oB.obj.lev + 2))) * .8; doot.zIndex = 100 - lev + 1; if(w<=8)ola.visibility="hidden"; else { ola.fontSize = w; ola.visibility="visible"; } doot.width = doot.height = w * 0.5; // --- view depth clamping if(lev<oB.obj.lev - 1 || lev>oB.obj.lev + 2){ visible = false; doot.left = -1E4; } else visible=true; } // --- color parent if(parent)if(o == oB.obj){ parent.doot.background = Cparent; parent.ola.color = "white"; } // --- color selected doot.background=(s)?"white":Cselected; if(!s)ola.color = "white"; // --- color children for(var i = 0 in m){ with(m[i]){ doot.background=(s)?"white":(m[0])?Cnode:Chyperlink; ola.color=(s)?"gray":"white"; } if(s)Mdoot(m[i],s); } } } // ---- Polar to X,Y coordinates calculation ------ function PoXY(o){ with(o){ for(var i = 0 in m){ // --- automatic angulation angle = ((30 * m[i].lev) + i * (360 / m.length)) / (180 / Math.PI); m[i].X = X + Math.cos(angle) * (E / m[i].lev); m[i].Y = Y + Math.sin(angle) * (E / m[i].lev); // -- children PoXY(m[i]); } } } // ------ anti-select ------------------- document.onselectstart = function () {return false;} // -------- drag STARFIELD -------------- document.onmousemove = function(e){ if (window.event) e = window.event; xm = (e.x || e.clientX); ym = (e.y || e.clientY); if(drag){ XdF=tempx+(nx-xm); YdF=tempy+(ny-ym); } return false; } document.onmousedown = function () { if(!hcli){ tempx=XdF-(nx-xm); tempy=YdF-(ny-ym); document.body.style.cursor="move"; drag = true; } hcli = false; return false; } document.onmouseup = function () { document.body.style.cursor=""; drag = false; return false; } // =============== generating menu ==================== function makeDots(){ nbrl = HDM.length; var I = new Array(); for(i=0;i<nbrl;i++)I[i] = new Array(); N=-1; for(j=0;j<10;j++){ for(i=0;i<nbrl;i++){ if(j<=HDM[i].length){ if(HDM[i][j]!="") if(j==0)N++; else if(HDM[i][j-1]!="")N=0; else N++; I[i][j+1]=N; } } N=0; } for(var i = 0 in HDM){ command = "m"; for(var j = 0 in HDM[i]){ dot = HDM[i][j]; if(dot!=""){ for(k=0;k<j;k++)command+='.m['+(I[i][k+1])+']'; command+='.dot("'+dot+'")'; eval(command); command = "m"; } } } } // --- yo! zyva ! ----------- onload = function() { m = new SFMenu("DYNOSAURS"); nx = document.body.offsetWidth; ny = document.body.offsetHeight; nx2 = nx * .5; ny2 = ny * .5; E = ny2 * .5; makeDots(); PoXY(m); root = m; oB = m.ref; cir = document.getElementById("circle").style; cir.width=ny2+6; cir.height=ny2+6; Mdoot(m,true); Mdoot(m,false); main(); } //--> </script> </head> <body> <img id="circle" src="http://www.songlecn.com/wp-content/supload/2009/02/05/200803272236370.gif" style="position:absolute;left:-1000"> <div style="position:relative;font-family:verdana;color:#ccc;font-size:8pt;padding:10px;z-index:1000;"> Experimental hyper-object oriented Galactic Menu<br><br> INSTRUCTIONS :<br> - click the dots to navigate<br> - drag&drop to change your position<br> - lost in space? <span onClick="m.ref.onmousedown();" style="cursor:pointer;color:#FF0000;">click</span><br> - back <span onClick="if(HP>0)HS[--HP].ref.onmousedown();" style="cursor:pointer;color:#FF0000"><<<</span><br><br> </div> </body> </html>
提示：你可以先修改部分代码再运行。
您的网名： * 必填
电子邮件： * 绝不会泄露
验证条码： *
个人主页：
评论内容：
(Ctrl+Enter快捷回复)
web集结号致力于
