A very interesting 3D spherical label Cloud compatible Ie8_javascript tips

See a very interesting tag cloud, 3D spherical, compatible IE 8, pro-Test available! No tests were available for other versions. Feel very interesting to take to record down, learning to learn, this article will release me to read the article address, first look at the effect:

Next is the code, HTML + CSS + JS, not based on jquery, so no need to introduce, the code can be copied down to see the effect:

<div id= "Div1" >
<a href= "http://www.cnblogs.com/ntt1219/" rel= "external nofollow" rel= "external" nofollow "rel=" external nofollow "rel=" External nofollow "> Forget the Taste </a>
<a href=" http://www.cnblogs.com/ ntt1219/"rel=" external nofollow "rel=" external nofollow "rel=" external nofollow "rel=" External nofollow "> Forget the Taste </ a>
<a href= "http://www.cnblogs.com/ntt1219/" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow "rel=" External nofollow "> Forget the Taste </a>
<a href=" http://www.cnblogs.com/ntt1219/"rel=" external nofollow "rel=" external nofollow "rel=" external nofollow "rel=" External nofollow "> Forget the Taste </a> 
</div>

 body {background: #000 URL (index.png) no-repeat center 230px;} #div1 {position:relative; width:450px; height:450px; margin:20px Auto 0; #div1 a {position:absolute; top:0px; left:0px; font-family:microsoft yahei; color: #fff; font-weight:bold; text-decorat Ion:none; PADDING:3PX 6px; #div1 a:hover {border:1px solid #eee; background: #000;} #div1. blue {color:blue;} #div1. red {color:red;} #div1. Yell 
ow {color:yellow;} 

var radius = 120;
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); }