Ich sah eine sehr interessante Tag -Cloud, 3D -kugelförmige, kompatibel mit IE 8, die für persönliche Tests verfügbar ist! Andere Versionen wurden nicht getestet. Wenn Sie denken, dass es interessant ist, zeichnen Sie es bitte auf und studieren Sie es. Die Adresse des Artikel, den ich gelesen habe, wird unter diesem Artikel veröffentlicht. Schauen wir uns den Effekt an:
Als nächstes kommt der Code HTML + CSS + JS, der nicht auf JQuery basiert. Es besteht also keine Notwendigkeit, ihn vorzustellen. Sie können den Effekt nach dem Kopieren des Codes sehen:
<div id = "div1"> <a href = "http://www.cnblogs.com/ntt1219/" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow"> vergiss den Geschmack </a> <a href rel = "externer nofollow" rel = "externe nofollow" rel = "external nofollow"> vergiss den Geschmack </a> <a href = "http://www.cnblogs.com/ntt1219/" rel = "externe noFoflOwlow" rel = "external noFlown" rel = "rel =" rel = "rel =" il = "il =" il = "il =" il = "extern" ay "aaNal noFlown" aples "a.a" aaNal nlowlown "aaTe", "rel =" il = "extern" aplEnal nlowlowwollowlown "> the the taste the the schoroxe" a -the -the -the -the -the -the -taste -the -the -the -the -the -taste "-Rel =" Rel = " href = "http://www.cnblogs.com/ntt1219/" rel = "externe nofollow" rel = "externe nofollow" rel = "external nofollow"> Vergessen Sie den Geschmack </a> </div>
Body {Hintergrund: #000 URL (index.png) No-Repeat Center 230px;} #div1 {Position: Relativ; Breite: 450px; Höhe: 450px; Rand: 20px Auto 0; }#div1 a {Position: absolut; Oben: 0px; links: 0px; Schriftfamilie: Microsoft Yahei; Farbe: #fff; Schriftgewicht: fett; Textdekoration: Keine; Polsterung: 3px 6px; } #div1 a: hover {border: 1px solid #eee; Hintergrund: #000; }#div1 .blue {color: blau;}#div1 .red {color: rot;}#div1 .yellow {color: gelb;} var radius = 120;var dtr = Math.PI/180;var d=300;var mcList = [];var active = false;var last = 1;var lastb = 1;var distr = true;var speed=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'); für (i = 0; i <aa.length; i ++) {ot Ag = {}; otag.offsetwidth = aa [i] .Offsetwidth; otag.offseteight = aa [i] .offseteight; mclist.push (otag);} Sinecosin ( 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.offseteight/2); MOUSEX/= 5; MOUSY/= 5;}; setinterval (upda.-) {function; (-Math.min( Math.max( -mouseY, -size ), size ) / radius ) * speed;b = (Math.min( Math.max( -mouseX, -size ), size ) / radius ) * speed;}else{a = last * 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; 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. 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*pro; mclist [j] .scale = per; mclist [j] .alpha = per; mclist [j] .alpha = (mclist [j] .alpha-0,6)*(10/6);} Doposition (); Tiefenort ();} Funktion 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;}}); für (i = 0; i <atmp.Length; i ++) {atmp [i] .style.zindex = i;}} function PositionAll () {var phi = 0; var theta = 0; var max = mclist.länge; var i = 0; Ofgragment = document.createdocumentFragment (); // zufällige Sortierung für (i = 0; i <aa.length; i ++) {atmp.push (aa [i]);} atmp.sort (function () {return {return Math.random () <0,5? 1: -1;}); für (i = 0; i <atmp.length; i ++) {Ofgragment.AppendChild (atmp [i]); i <max+1; i ++) {if (dest) {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*(2*(2*()*(2*(2*(2*()*(2*(2*(2*()*(2*(2*(2*()); 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.offseteight/2-mclist [i-1] .offseteight/2+' px ';}} Funktion Doposition () {var l = odiv.offsetwidth/2; var t = odiv.offseteight/2; für (var i = 0; i <mclist.length; i ++) {aa [i] .style.left = mclist [i] .cx+l-mclist [i] .offsetwidth/2+'px'; Le.Fontsize = math.ceil (12*mclist [i] .Scale/2)+8+'px'; = Math.sin (a * dtr); ca = math.cos (a * dtr);