J'ai vu un nuage de balises très intéressant, sphérique 3D, compatible avec IE 8, disponible pour des tests personnels! D'autres versions n'ont pas été testées. Si vous pensez que c'est intéressant, veuillez l'enregistrer et l'étudier. L'adresse de l'article que j'ai lu sera publiée ci-dessous cet article. Jetons un coup d'œil à l'effet:
Vient ensuite le code, HTML + CSS + JS, qui n'est pas basé sur jQuery, il n'est donc pas nécessaire de l'introduire. Vous pouvez voir l'effet après la copie du code:
<div id = "div1"> <a href = "http://www.cnblogs.com/ntt1219/" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow"> oublier le goût </a> rel = "external nofollow" rel = "externe nofollow" rel = "external nofollow"> oublier le goût </a> <a href = "http://www.cnblogs.com/ntt1219/" rel = "external nofollow" rel = "external nofollow" lil = "external nofollow"> href = "http://www.cnblogs.com/ntt1219/" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow"> oublier le goût </a> </div>
Body {Background: # 000 URL (index.png) NO-Repeat Center 230px;} # div1 {position: relative; Largeur: 450px; hauteur: 450px; marge: 20px auto 0; } # div1 a {position: absolue; En haut: 0px; gauche: 0px; Font-Family: Microsoft Yahei; Couleur: #FFF; Police-poids: Bold; Décoration du texte: aucune; rembourrage: 3px 6px; } # div1 a: hover {border: 1px solide #eee; Contexte: # 000; } # div1 .Blue {couleur: bleu;} # div1 .red {couleur: rouge;} # div1 .yellow {couleur: jaune;} var radius = 120; var dtr = math.pi / 180; var d = 300; var mclist = []; var active = false; var dernier = 1; var lastb = 1; var dist = true; var speed = 10; var size = 250; var muSex = 0; var prieyy = 0; otag = null; odiv = document.getElementById ('div1'); aa = odiv.getElementsByTagName ('a'); for (i = 0; i <aa.length; i ++) {ot Ag = {}; otag.offsetwidth = aa [i] .offsetwidth; otag.offsetheight = aa [i] .offsetheight; mclist.push (otag);} suinécosine ( 0,0,0); positionAll (); odiv.onMouseOver = function () {active = true;}; odiv.onmouseout = function () {active = false;}; odiv.onmousemove = function (ev) {var oevent = window.event || ev; sourisx = oevent.clientx- (odiv.offsetleft + odiv.offsetwidth / 2); mousey = oevent.clienty- (odiv.offsetTop + odiv.offsetheight / 2); mousex / = 5; mousey / = 5;}; setInterval (update, 30);}; fonction update (-Math.min (math.max (-mousey, -size), size) / radius) * Speed; b = (math.min (math.max (-mousex, -size), taille) / radius) * Speed;} else {a = dernier * 0,98; b = dernier * 0,98;} lasta = a; lastb = b; Math.abs (b) <= 0,01) {return;} var c = 0; sincosine (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 * cc; var ry3 = rx2 * Sc + ry * cc; rz3 = rz2; mclist [j] .cx = rx3; mclist [j] .cy = ry3; mclist [j] .cz = rz3; per = d / (d + rz3); mclist [j] .x = (Howelliptique * rx3 * per) - (Howelptical * 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 ();} fonction 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 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 i = 0; ofragment = document.CreatedocumentFragment (); // Sort aléatoire pour (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 (dist) {phi = math.acos (-1+ (2 * i-1) / max); theta = math.sqrt (max * math.pi) * phi;} else {phi = math.random () * (math.pi); theta = coordon 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 ';}} fonction 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]. le.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; = 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);};