<! DOCTYPE html>
<meta charset=utf-8/>
<title>3d Spherical Label </title>
<link rel= "stylesheet" type= "Text/css" href= "3dtag_style.css"/>
<script type= "Text/javascript" src= "3dtag.js" ></script>
<body>
<div id= "Div1" >
<a href= "#" > Fruit category </a>
<a href= "#" class= "Red" > Apple </a>
<a href= "#" > Banana </a>
<a href= "#" > Watermelon </a>
<a href= "#" class= "Blue" >3Dtag</a>
<a href= "#" >SEO</a>
<a href= "#" > Dragon Fruit </a>
<a href= "#" class= "yellow" > Pear </a>
<a href= "#" > Ball </a>
<a href= "#" class= "Red" >CSS</a>
<a href= "#" >PHP</a>
<a href= "#" class= "Blue" >Java</a>
<a href= "#" > Inheritance </a>
<a href= "#" >C#</a>
<a href= "#" class= "Blue" >OOP</a>
<a href= "#" > Language category </a>
<a href= "#" class= "blue" > Tomatoes </a>
<a href= "#" >C++</a>
<a href= "#" >C</a>
<a href= "#" > Tomato </a>
<a href= "#" >demo</a>
</div>
<p>3d Spherical tag</p>
</body>
var radius = 120; rotating radius;
var DTR = math.pi/180;
var d=300;
var mclist = [];
var active = false;
var lasta = 1;
var lastb = 1;
var distr = true;
var tspeed=10;
var size=250;
var mousex=0;
var mousey=0;
var howelliptical=1;
var aa=null;
var odiv=null;
Window.onload=function ()
{
var i=0;
var otag=null;
Odiv=document.getelementbyid (' Div1 ');
Aa=odiv.getelementsbytagname (' a ');
for (i=0;i<aa.length;i++)
{
otag={};
Otag.offsetwidth=aa[i].offsetwidth;
Otag.offsetheight=aa[i].offsetheight;
Mclist.push (Otag);
}
Sinecosine (0,0,0);
Positionall ();
Odiv.onmouseover=function ()
{
Active=true;
};
Odiv.onmouseout=function ()
{
Active=false;
};
Odiv.onmousemove=function (EV)
{
var Oevent=window.event | | Ev
mousex=oevent.clientx-(ODIV.OFFSETLEFT+ODIV.OFFSETWIDTH/2);
mousey=oevent.clienty-(ODIV.OFFSETTOP+ODIV.OFFSETHEIGHT/2);
mousex/=5;
mousey/=5;
};
SetInterval (update, 30);
};
function Update ()
{
var A;
var b;
if (active)
{
A = (-math.min (Math.max (-mousey,-size), size)/radius) * tspeed;
b = (Math.min (Math.max (-mousex,-size), size)/radius) * tspeed;
}
Else
{
A = Lasta * 0.98;
b = Lastb * 0.98;
}
Lasta=a;
Lastb=b;
if (Math.Abs (a) <=0.01 && Math.Abs (b) <=0.01)
{
Return
}
var c=0;
Sinecosine (A,B,C);
for (Var j=0;j<mclist.length;j++)
{
var rx1=mclist[j].cx;
var ry1=mclist[j].cy*ca+mclist[j].cz* (-SA);
var Rz1=mclist[j].cy*sa+mclist[j].cz*ca;
var rx2=rx1*cb+rz1*sb;
var ry2=ry1;
var rz2=rx1* (-SB) +RZ1*CB;
var rx3=rx2*cc+ry2* (-SC);
var ry3=rx2*sc+ry2*cc;
var rz3=rz2;
MCLIST[J].CX=RX3;
Mclist[j].cy=ry3;
mclist[j].cz=rz3;
Per=d/(D+RZ3);
mclist[j].x= (Howelliptical*rx3*per)-(howelliptical*2);
Mclist[j].y=ry3*per;
Mclist[j].scale=per;
Mclist[j].alpha=per;
Mclist[j].alpha= (mclist[j].alpha-0.6) * (10/6);
}
Doposition ();
Depthsort ();
}
function Depthsort ()
{
var i=0;
var atmp=[];
for (i=0;i<aa.length;i++)
{
Atmp.push (Aa[i]);
}
Atmp.sort
(
function (VItem1, VITEM2)
{
if (vitem1.cz>vitem2.cz)
{
return-1;
}
else if (vitem1.cz<vitem2.cz)
{
return 1;
}
Else
{
return 0;
}
}
);
for (i=0;i<atmp.length;i++)
{
Atmp[i].style.zindex=i;
}
}
function Positionall ()
{
var phi=0;
var theta=0;
var max=mclist.length;
var i=0;
var atmp=[];
var ofragment=document.createdocumentfragment ();
Random sort
for (i=0;i<aa.length;i++)
{
Atmp.push (Aa[i]);
}
Atmp.sort
(
function ()
{
Return Math.random () <0.5?1:-1;
}
);
for (i=0;i<atmp.length;i++)
{
Ofragment.appendchild (Atmp[i]);
}
Odiv.appendchild (ofragment);
for (var i=1; i<max+1; i++) {
if (DISTR)
{
Phi = Math.acos ( -1+ (2*i-1)/max);
theta = math.sqrt (Max*math.pi) *phi;
}
Else
{
Phi = Math.random () * (MATH.PI);
theta = Math.random () * (2*MATH.PI);
}
Coordinate transformation
mclist[i-1].cx = radius * Math.Cos (theta) *math.sin (PHI);
mclist[i-1].cy = radius * Math.sin (theta) *math.sin (PHI);
mclist[i-1].cz = Radius * Math.Cos (PHI);
aa[i-1].style.left=mclist[i-1].cx+odiv.offsetwidth/2-mclist[i-1].offsetwidth/2+ ' px ';
aa[i-1].style.top=mclist[i-1].cy+odiv.offsetheight/2-mclist[i-1].offsetheight/2+ ' px ';
}
}
function Doposition ()
{
var l=odiv.offsetwidth/2;
var t=odiv.offsetheight/2;
for (Var i=0;i<mclist.length;i++)
{
aa[i].style.left=mclist[i].cx+l-mclist[i].offsetwidth/2+ ' px ';
aa[i].style.top=mclist[i].cy+t-mclist[i].offsetheight/2+ ' px ';
Aa[i].style.fontsize=math.ceil (12*MCLIST[I].SCALE/2) +8+ ' px ';
Aa[i].style.filter= "Alpha (opacity=" +100*mclist[i].alpha+ ")";
Aa[i].style.opacity=mclist[i].alpha;
}
}
function Sinecosine (A, B, c)
{
SA = Math.sin (A * DTR);
CA = Math.Cos (A * DTR);
SB = Math.sin (b * DTR);
CB = Math.Cos (b * DTR);
sc = Math.sin (c * DTR);
CC = Math.Cos (c * DTR);
}
