超酷JS圆形浮动菜单

 

<html>
<head>
<title>www.lanrentuku.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>

转载于:https://www.cnblogs.com/JPAORM/archive/2011/11/14/2509974.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值