模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
综合其它特效代码
>
收藏
分享
查看评论
综合其它
演示
爆炸式的JS圆形浮动菜单特效代码_综合其它特效
查看演示效果
特效Tag：
浮动菜单
添加
爆炸式的JS圆形浮动菜单特效代码，点击主菜单后，子菜单会爆炸式展开，挺有意思的。
<html> <head> <title>JS圆形浮动菜单下载</title> <meta http-equiv="imagetoolbar" mrc="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"><!-- 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', ''] ]; 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.mb5u.com/jscss/demoimg/logo_demo2.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>
所属频道：
综合其它特效
/
更新时间：2012-12-30
[收藏]
[报错]
[返回列表]
相关
综合其它特效
：
MD5加密
页面保护 可以禁止某些IP的访问
冻结你的窗口，使窗口无法再响应
鼠标放上就激活链接
密码强弱度检测万能插件
叫你计算机"爬"着工作
仿VB密码
打开网页后即在后台打开无数记事本
输入正确进入密码保护页
一点按钮就会跳出无限窗口，直到耗尽您的资源
输入密码后才能进入页面
弹出无限IE
综合其它特效Rss订阅
特效代码搜索
综合其它特效推荐
叫你计算机"爬"着工作
HTTP 1.1状态代码及其含义
切换效果
JavaScript模仿鼠标拖动选择功能
163网站的一款JS滑屏广告
很实用的对联广告代码(自适应高度)
弹出无限IE
JS大幅卷屏广告代码
兼容多组的JS浮动广告【荐】
可定时自动关闭的弹出层广告窗口代码
猜你也喜欢看这些
jQuery Firstebox 相册图片放大插件
又一个jQuery提示窗插件(可拖动)
78-FLASH+XML迅雷影片广告特效
eogallery-1.0 旋转式图片切换
jquery mbMenu 菜单插件
yahoo-logo点击叹号发音按钮
带适时提示的jQuery 表单验证实例
jquery 表单美化 CSS3和jquery应用select 美化选择元素
js+flash可上下翻页的焦点图代码
基于jQuery的图片滚动切换插件
相关链接：
复制本页链接
|
搜索爆炸式的JS圆形浮动菜单特效代码
特效说明：
综合其它模板
-
爆炸式的JS圆形浮动菜单特效代码
。
。。