JS:酷酷的圆轨迹唤动菜单
<head>
<title>www.ydaima.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="/html/UploadPic/2009-7/20097151893458.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>
转载于:https://www.cnblogs.com/vilyLei/articles/1615367.html
JS:酷酷的圆轨迹唤动菜单相关推荐
- Vue.js 打造酷炫的可视化数据大屏
可视化技术与 Vue 介绍 实验介绍 在本节实验中,将对可视化技术的应用场景.发展历程进行介绍,让大家对可视化技术有一个基础的概念.随后将介绍如今流行的可视化框架与其之间的优缺点对比.最后介绍 Vue ...
- html5 下拉框 美化,纯js超酷select下拉框美化插件
tastySelect是一款纯js超酷select下拉框美化插件.tastySelect下拉框插件支持多选,内置两种主题,使用CSS3动画过渡效果,整体设计时尚大方. 使用方法 在页面中引入tasty ...
- js实现酷炫倒计时动画效果
前段时间和朋友去音乐餐厅吃饭,中间有个活动,然后看到他们软件公众号H5有个活动开始的倒计时的动画效果,于是想了下实现思路. <!DOCTYPE html> <html> < ...
- python画车辆轨迹图_如何利用 Python 绘制酷炫的 车辆轨迹 — 速度时空图?三维数据用二维图像呈现...
说明:本文系交通攻城狮原创文章,如需转载请私信联系,侵权必究. 2020,第 30 期,编程笔记 建议直接阅读精编版:如何利用 Python 绘制酷炫的 车辆轨迹 - 速度时空图?三维数据用二维图像呈 ...
- JS超级酷的导航菜单代码
代码简介: JS超级酷的导航菜单代码,类似WINDOWS风格的导航,又又立体效果,很不错的,赶快运行一下,一睹为快吧. 代码内容: <HTML> <HEAD> <TITL ...
- html js 循环提示框,纯js超酷消息提示框插件notice.js
notice.js是一款纯js超酷消息提示框插件.notice.js为纯js编写,没有任何依赖文件.通过它可以在页面上制作出漂亮的toast消息通知框效果.该js消息提示框插件的特点还有: 支持4中情 ...
- JS 炫酷特效敢超 Flash
千一网络收集的几十个超酷 JavaScript 特效,这些特效在网上有些也有发布,不过这个应该是最全的. JS 炫酷特效敢超 Flash-3D 特效演示 JS 炫酷特效敢超 Flash-阵列特效演示 ...
- HTML5期末大作业:宠物主题网站设计——酷酷动物主题响应式网页(5页) HTML+CSS+JavaScript...
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
- 用个人博客打造一个酷酷的工作流
用个人博客打造一个酷酷的工作流! 每个前端都应该拥有一个自己的博客.因为它不仅仅是一个博客.更是属于自己的一个工作流.如何来理解这个问题呢.这也就是我要开发一个博客的初衷. 似乎自己也没有一个写博客的 ...
最新文章
- 这篇文章说出了研究生和导师的相处真谛……
- SAP WM Storage Type Search配置里的Storage Class WPC标记
- Java Socket实战之三:传输对象
- 波卡链Substrate (5)托盘Pallets进阶
- 尝试使用jBPM Console NG(测试版)
- 纯css隐藏移动端滚动条解决方案(ios上流畅滑动)
- 力扣合并两个有序数组
- 【转】ASP.NET ViewState详解
- UI自定义UITableView的右侧索引
- 413 Request Entity Too Large 异常记录
- ArcEngine C# 二次开发 PolyLine 多次打断操作
- HDU 1230解题报告
- 动易html编辑器漏洞,动易网站管理系统删除任意文件漏洞
- 我们的青春已落幕,用 Python 分析韦德职业生涯数据
- Win11亮度无法调节解决方法(在卸载驱动,关闭自适应亮度和修改注册表都行不通的情况下)
- JAVA导出EXCEL实现
- Mysql笔试+面试题积累(实时更新)
- 6-4 学生成绩链表处理(20 分)
- 基于ESP8266的智能家庭检测系统
- 针对小游戏的激励视频,如何通过数据分析提升广告收入