Vi una nube de etiquetas muy interesante, esférica 3D, compatible con IE 8, disponible para pruebas personales. No se han probado otras versiones. Si cree que es interesante, grabarlo y estudiarlo. La dirección del artículo que leí se publicará a continuación este artículo. Echemos un vistazo al efecto:
El siguiente es el código, HTML + CSS + JS, que no se basa en jQuery, por lo que no hay necesidad de introducirlo. Puede ver el efecto después de copiar el código:
<div id = "div1"> <a href = "http://www.cnblogs.com/nttt1219/" rel = "externo nofollow" rel = "externo nofollow" rel = "externo nofollow"> olvídate del gusto </a> <a href = "http://wwww.cnblogs.com/nttt1219/" rELTER " rel = "nofollow externo" Rel = "Nofollow externo"> Olvídate del gusto </a> <a href = "http://www.cnblogs.com/nttt1219/" rel = "externo nofollow" rel = "externo" rElfollow "rel =" noFollow externo "> Olvídate del sabor </a> <a href = "http://www.cnblogs.com/ntt1219/" rel = "externo nofollow" rel = "externo nofollow" rel = "externo nofollow"> Olvida el sabor </a> </div>
cuerpo {fondo: #000 URL (index.png) Centro sin repetición 230px;} #div1 {posición: relativo; Ancho: 450px; Altura: 450px; Margen: 20px Auto 0; }#div1 a {posición: absoluto; arriba: 0px; Izquierda: 0px; Font-Family: Microsoft Yahei; Color: #fff; Font-Weight: Bold; Decoración de texto: ninguna; relleno: 3px 6px; } #div1 a: hover {border: 1px solid #eee; Antecedentes: #000; }#div1 .blue {color: azul;}#div1 .red {color: rojo;}#div1 .elellow {color: amarillo;} var radio = 120; var dtr = math.pi/180; var d = 300; var mclist = []; var activo = false; var last = 1; var lastb = 1; var dist = var speed = 10; var size = 250; var rousex = 0; var rousey = 0; var howelliptical = 1; var aa = null; var odiv = null; ventana. otag = null; odiv = document.getElementById ('div1'); aa = odiv.getElementsByTagName ('a'); para (i = 0; i <aa.length; i ++) {OT ag = {}; otag.offsetwidth = aa [i] .OffsetWidth; otag.OffSetheight = aa [i] .Offsetheight; Mclist.push (otag);} sinecosina ( 0,0,0); posicionAll (); odiv.onmouseover = function () {activo = true;}; odiv.onmouseOut = function () {activo = 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; (-Math.min (Math.max (-Mousey, -size), size) / Radius) * velocidad; b = (math.min (math.max (-Mousex, -size), size) / radius) * velocidad;} else {a = último * 0.98; b = último * 0.98;} lastA = a; lastb = b; if (math.abs (a) <) 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 rx3 = rx2*cc+ry2*cc; var ry3 = rx2*cc+ry2*cc; var+ry2*c+ry2*c+ry2*c+ry2*c+ry2*c+ry2*c+ry2*c+ry2*c+ry2*c+ry2*c+ry2*c+ry2*c+ry2*c+ry2*c+ry2*c+ry2; rz3 = rz2; Mclist [j] .cx = rx3; Mclist [j] .cy = ry3; Mclist [j] .cz = rz3; per = d/(d+rz3); Mclist [j] .x = (howelliptical*rx3*per)-(guilípico*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 (); profundidad ();} función profundidad de profundidad () {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;} más if (vitem1.cz <vitem.cz) 1;} else {return 0;}}); for (i = 0; i <atmp.length; i ++) {atmp [i] .style.zindex = i;}} function posicionAll () {var phi = 0; var theta = 0; var max = mclist.length; var i = 0; var i = 0; var atmp = []; ofRagment = document.createDocumentFragment (); // sort aleatorio para (i = 0; i <aa.length; i ++) {atmp.push (aa [i]);} atmp.sort (function () {return Math.random () <0.5? 1: -1;}); para (i = 0; i <atmp.length; i ++) {ofRagment.appendChild (ATMP [i]);} odiv.appendChild (ofRagment); para (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 = math.random ()*(2*math.pi);} /// Coordinate 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] .OffSetheTeight/2+' PX ';}} Función doPosition () {var l = odiv.offsetwidth/2; var t = odiv.offsetheight/2; para (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].sty le.fontSize = Math.ceil (12*Mclist [i] .scale/2)+8+'Px'; aa [i] .style.filter = "Alpha (opacidad ="+100*Mclist [i] .alpha+")"; aa [i] .Style.opacity = McList [i] .alpha;}} Función senecosine (A, b, c) c) b, C) 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);}