这是一款浮动菜单显示效果，用户点击菜单名称后浮动展开居中显示，这款菜单特效立体效果很强。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>js实现浮动菜单展开显示特效_武鸣人</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"><!--
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', 'https://www.wuming.ren'],
['','', '', '', '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>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<img id="circle" src="/img/20240307_www_wuming_ren_44w_big.jpg" style="position:absolute;left:-1000">
</body>
</html>本文来自武鸣人网站，转载请注明出处