【荐】JS实现类似星球仿flash效果的动态菜单
代码简介：推荐朋友们看看，非常值得，JS类似flash，又有点星空的感觉。
代码内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>【荐】JS实现类似星球仿flash效果的动态菜单_网页代码站(www.webdm.cn)</title><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 speedvar 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.webdm.cn/images/20100822/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><br><p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p> |
代码来自：http://www.webdm.cn/webcode/a9a6f135-f8f5-4a79-9e39-f1520280a6c6.html
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
· ASP.NET Core 模型验证消息的本地化新姿势
· ThreeJs-16智慧城市项目（重磅以及未来发展ai）
· .NET 原生驾驭 AI 新基建实战系列（一）：向量数据库的应用与畅想
· Ai满嘴顺口溜，想考研？浪费我几个小时
· Browser-use 详细介绍&使用文档
· 软件产品开发中常见的10个问题及处理方法