【荐】JS实现类似星球仿flash效果的动态菜单
2024-05-14 02:57:48
代码简介：推荐朋友们看看，非常值得，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 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 = " " + labelobj.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 dotsif(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 dootsif(inscr){doot.left = pL - w * .25;doot.top = pT - w * .25;}}}}
}
// ---- transfer & colors -------------
function Mdoot(o,s){with(o){if(s){// --- Graphic Attributsw = 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 clampingif(lev<oB.obj.lev - 1 || lev>oB.obj.lev + 2){visible = false;doot.left = -1E4;} else visible=true;}// --- color parentif(parent)if(o == oB.obj){parent.doot.background = Cparent;parent.ola.color = "white";}// --- color selecteddoot.background=(s)?"white":Cselected;if(!s)ola.color = "white";// --- color childrenfor(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 angulationangle = ((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);// -- childrenPoXY(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
转载于:https://www.cnblogs.com/webdm/archive/2011/06/06/2073591.html
【荐】JS实现类似星球仿flash效果的动态菜单相关推荐
- JS打字效果的动态菜单代码分享
这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...
- 赵雅智_名片夹（5）_Android中listview可折叠伸缩仿手风琴效果（动态）
转载请标明出处:http://blog.csdn.net/zhaoyazhi2129/article/details/38080857 之前写了一篇静态数据listview显示手风琴效果,今天写的博客 ...
- JS+CSS防FLASH效果竖向可折叠的滑动菜单
代码简介:很不错的效果,类似动画慢慢的折叠. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- android 苹果电脑底部图标滚动效果,JS实现仿苹果底部任务栏菜单效果代码
本文实例讲述了JS实现仿苹果底部任务栏菜单效果代码.分享给大家供大家参考.具体如下: 这款仿苹果电脑的底部任务栏菜单,是纯JavaScript实现的菜单特效,鼠标放上有响应效果,菜单图标会变大,而且动 ...
- html5行星环绕,Two.js实现星球环绕动画效果
Two.js 是面向现代 Web 浏览器的一个二维绘图 API.Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁.本文主要介绍了基于Two ...
- vue列表左右箭头滑动_vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）...
1.效果图如下 2.vue代码如下 indicator-position="none" :autoplay="false"> > {{items.b ...
- Javascript 仿Flash 图片切换 及 Flash 图片切换
1. Javascript 仿Flash 图片切换 http://www.fansart.com/cweb/200669141456.asp <a target=_self href=" ...
- h5动画 php,GitHub - calcyu/wechat_html5_animate: 微信上的HTML5动画，类似易企秀效果。...
wechat_html5_animate ##微信上的HTML5动画,类似易企秀效果. ##制作HTML5动画的动机 微信上收到了一个可以编辑祝福语的拜年H5,故想尝试一下如何制作. ##制作工具 A ...
- 仿FLASH动感十足鼠标滑过放大的菜单代码
代码简介: 一款动感十足的仿FLASH菜单,当鼠标滑过菜单某一项的时候,该项会自动变大,其它菜单则减小,如果鼠标滑过的速度很快,那这款菜单就会出现操作感极强的菜单效果,不明白的可运行一下代码便知. 代 ...
最新文章
- Fastcgi 协议解析及 getpost 使用实例
- 菜鸟也学DW做ASP
- 快速分类–三向和双枢轴
- 前端学习（2139）：webpack的安装
- shiro学习(15)：使用注解实现权限认证和后台管理
- linux创建vnc服务器,五步建立一个VNC Linux服务器
- java函数式编程 map_函数式编程-对Java 8流进行分区
- python中的点的作用_Python基础学习中关键点的作用（三）,python,重点,之,函数,3
- css animate属性spend不生效
- linux中删除mysql用户_linux系统下mysql添加用户、删除用户、授权、修改密码等sql命令使用...
- CPDA数据分析师：一个完整的数据分析流程
- MPEG4标准中的Advanced Simple Profile（ASP）完整的说明-01-02章
- 数据库设计——手机售卖系统(带源码)
- Kinect(XBOX360)相机在ROS下标定
- bs客户端跨服务器管理文件,bs架构客户端和服务器
- 视频怎么压缩变小？视频压缩变小的具体操作步骤
- 技术人“结构化思维”训练的一点想法和实践
- 程序员睡前发「73 76 79 86 85」，女孩熬夜破解发现竟是表白密码！
- Hibernate第三讲：Hibernate主键策略和Hibernate的查询方案
- 清华规划院 伟景行 诚聘 Jsp/Java/Web高级开发工程师 互联网开发主管 测试工程师 etc.
热门文章
- 【Android】使用后端云Bmob实现登录、注册
- 台式计算机可以连接手机WiFi么,台式机能连wifi吗
- 二度理解Java web中的核心知识
- 国科大学习资料--人工智能原理与算法-第十四次作业解析（学长整理）
- Google Colab中把pyth3.7版本更换成python2.7
- 计算机视觉与深度学习基本环境安装
- 处理BigDecimal字段， java.math.BigDecimal cannot be cast to [Ljava.lang.Object;
- gateway oauth2 对称加密_深入理解Spring Cloud Security OAuth2及JWT
- [不好分类]关于河北盛华化工有限公司附近爆炸原因猜测
- python安装出错0xc00006b_python 装不起来，提示0x80240017错误，咋办?