Eu vi uma nuvem de tags muito interessante, 3D esférica, compatível com o IE 8, disponível para testes pessoais! Outras versões não foram testadas. Se você acha interessante, grave e estude. O endereço do artigo que li será divulgado abaixo deste artigo. Vamos dar uma olhada no efeito:
Em seguida, é o código, HTML + CSS + JS, que não é baseado no jQuery, portanto não há necessidade de introduzi -lo. Você pode ver o efeito depois de copiar o código:
<div id = "div1"> <a href = "http://www.cnblogs.com/ntt1219/" rel = "Nofollow externo" rel = "Nofollow" REL = "Nofollow"> esqueça o sabor </a> <a href = "http://www.cnblow.cnbll) Rel = "Nofollow externo" rel = "Nofollow externo"> Esqueça o sabor </a> <a href = "http://www.cnblogs.com/ntt1219/" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo"> esqueça o sabor </a> href = "http://www.cnblogs.com/ntt1219/" rel = "Nofollow externo" rel = "Nofollow externo" rel = "Nofollow externo"> Esqueça o sabor </a> </div>
corpo {background: #000 url (index.png) no centro de repetição 230px;} #div1 {position: relativo; Largura: 450px; Altura: 450px; margem: 20px automático 0; }#div1 a {posição: absoluto; Top: 0px; Esquerda: 0px; Fonte-família: Microsoft Yahei; Cor: #FFF; Peso da fonte: negrito; Decoração de texto: Nenhum; preenchimento: 3px 6px; } #div1 a: hover {borda: 1px sólido #eee; Antecedentes: #000; }#div1 .blue {color: blue;}#div1 .red {color: Red;}#div1 .yellow {color: amarelo;} var raio = 120; var dtr = math.pi/180; var d = 300; var mclist = []; var ativo = false; var last = 1; var lastB = 1; var dist = true; var speed = 10; var size = 250; var mousex = 0; var mouse = 0; 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 () {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; mouse/= 5;}; (-Math.min (math.max (-mousey, -size), tamanho) / raio) * velocidade; b = (math.min (math.max (-mousex, -size), size) / raio) * speed;} else {a = last * 0.98; b = lastB * 0.98;} a; Math.abs (b) <= 0,01) {return;} var c = 0; sinecosina (a, b, c); para (var j = 0; j <mclist.length; j ++) {var rx1 = mclist [j] .cx; var ry1 = mclist [j] .cy*ca+m-m-m-m-m-M-M-M-M-M-M-M-+[J]. rz1 = mclist [j] .cy*sa+mclist [j] .cz*ca; var rx2 = rx1*cb+rz1*sb; var ry2 = ry1; var rz2 = rx1*(-sb)+rz1*cb = rx2 = rx2*cc+ry2*c; 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*por; mclist [j] .cale = por; mclist [j] .alpha = por; mclist [j] .alpha = (mclist [j] .alpha-0.6)*(10/6);} doposition (); depthSort ();} função deptSort () {var i = 0; var atmp = []; para (i = 0; i <aa.length; i ++) {atmp.push (aa [i]);} atmp.sort (functem1 (vitem1, vitem2) {if (vitem1.cz> vitem1; 1;} else {return 0;}}); para (i = 0; i <atmp.length; i ++) {atmp [i] .style.zindex = i;}} função positionall () {var phi = 0; var theta = 0; var max = mcrist.Length; Ofragment = Document.CreateCumentFragment (); // Classificação aleatória 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 (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 *. mclist [i-1] .cx = raio * math.cos (teta) * math.sin (phi); mclist [i-1] .cy = raio * math.sin (teta) * 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 ';}} função 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-mcr [i] le.fontsize = math.ceil (12*mclist [i] .cale/2)+8+'px'; aa [i] .style.filter = "alpha (opacity ="+100*mclist [i] .alpha+")"; aa [i] .style.opacity = mclist [i] .lpha .lpha+")"; = 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);}