版权声明
·
网站留言
·
联系我们
·
加入收藏
热门关键词:
焦点图
png图标
背景
按钮
首页
PNG图标
广告代码
网页模板
字体下载
JS代码
CSS样式
技术文档
网站常用
gif图片
JPG图片
JavaScript用户手册
flash动画
jsp编程
.net编程
网站配色
网站优化
Oracle教程
JS技术
数据库编程
网络维护
html基础
安全相关
测试相关
知识扩展
CSS技术
DIV+CSS实例
DIV+CSS教程
鼠标特效
网站常用
文字特效
时间日期
图片特效
表格图层
导航菜单
网页特效
详细内容
首页
>>
JS
>>
导航菜单
>> 正文
[
关闭窗口
]
超酷JS圆形浮动菜单下载
发布日期:2010-03-16
点击:43527
<html> <head> <title>超酷JS圆形浮动菜单下载--站点基地[zdbase.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.lanrentuku.com/images/uppic/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>
提示:您可以先修改部分代码再运行,复制代码和保存代码功能在Firefox下无效。
相关文章
关于我们
-
版权声明
-
联系我们
-
网站留言
-
网站地图
Copyright © 2010 zdbase.com All Rights Reserved.
苏ICP备15039389号
可人软件设计