3D spherical label cloud (compatible with IE8)

See a very interesting Tag Cloud, 3D ball, compatible with IE 8, test available! Other versions are not tested. If you find it interesting, record it and learn it. below this article, we will release the address of the article I have read. Let's take a look at the effect:

The following is the code, HTML + CSS + JS, which is not based on jquery, so you do not need to introduce it. Copy the code to see the effect:

<Div id = "div1"> <a href = "http://www.cnblogs.com/ntt1219/"> forgot taste </a> <a href = "http://www.cnblogs.com/ntt1219/"> forgot taste </a> 
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-decoration:none; padding: 3px 6px; }         #div1 a:hover {border: 1px solid #eee; background: #000; }         #div1 .blue {color:blue;}         #div1 .red {color:red;}         #div1 .yellow {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. offsetwi DTH = AA [I]. offsetwidth; otag. offsetheight = AA [I]. offsetheight; mclist. push (otag);} sinecosine (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); MOUs EX/= 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 =; 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 <MC List. 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; mclis T [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 sorting 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 );}
Thank you for sharing your thoughts.