Saya melihat tag cloud yang sangat menarik, bola 3D, kompatibel dengan IE 8, tersedia untuk pengujian pribadi! Versi lain belum diuji. Jika menurut Anda itu menarik, silakan catat dan pelajari. Alamat artikel yang saya baca akan dirilis di bawah artikel ini. Mari kita lihat efeknya:
Berikutnya adalah kode, HTML + CSS + JS, yang tidak didasarkan pada jQuery, jadi tidak perlu memperkenalkannya. Anda dapat melihat efeknya setelah menyalin kode:
<Div id = "Div1"> <a href = "http://www.cnblogs.com/ntt1219/" rel = "eksternal nofollow" rel = "eksternal nofollow" rel = "eksternal nofollow"> lupakan </a> <a href = "http://www.com.ckom.ckom.ckom.ckom.ckom.ckom. nofollow "rel =" eksternal nofollow "rel =" eksternal nofollow "> lupakan selera </a> <a href =" http://www.cnblogs.com/ntt1219/ "rel =" nofollow eksternal "rel =" eksternal nofollow "rel =" eksternal nofollow "> lupa The External nofollow" Rel = "eksternal nofollow" rel = "eksternal nofollow ollow ikut </ External nofollow" href = "http://www.cnblogs.com/ntt1219/" rel = "eksternal nofollow" rel = "eksternal nofollow" rel = "nofollow eksternal"> lupakan selera </a> </div>
body {background: #000 url (index.png) no-repeat center 230px;} #div1 {position: relatif; Lebar: 450px; Tinggi: 450px; Margin: 20px Auto 0; }#div1 a {position: absolute; Atas: 0px; Kiri: 0px; Font-Family: Microsoft Yahei; Warna: #fff; font-weight: tebal; Dekorasi Teks: Tidak Ada; padding: 3px 6px; } #Div1 A: Hover {border: 1px solid #eee; Latar belakang: #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 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'); untuk (i = 0; i <aa.length; i ++) {ot ag = {}; otag.offsetWidth = aa [i] .offsetWidth; oTag.OffsetHeight = aa [i] .offsetheight; McList.push (otag);} sinecosine ( 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.offsetheight/2); mousex/= 5; mousey/= 5;}; setInterval (update, 30); function (30); {{{{{{{mousex); (-Math.min (Math.max (-mousey, -size), size) / radius) * kecepatan; b = (math.min (math.max (-mousex, -size), ukuran) / radius) * kecepatan;} else {a = last * 0.98; b = lastb * 0.98;} last; AP; 0) (ATB = 0.AB = B = LastB * 0.98;} Last; AP; ATB = 0,98; B = LastB * 0.98;} Last; AP; ATB = 0.AB = B = B = LASTB * 0.98;} Last; ATB = 0.AB = B. Math.abs (b) <= 0.01) {return;} var c = 0; sinecosine (a, b, c); untuk (var j = 0; j <Mclist.length; j ++) {var rx1 = Mclist [j] .cx; var ry1 = Mclist [j] .cy*ca+mclist [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; var rx3 = rx2*cc+ry2*rz1*cb; var rx3 = rx2*cc+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)-(howelliptical*2); McList [j] .y = ry3*per; McList [j] .scale = per; Mclist [j] .Alpha = per; Mclist [j] .Alpha = (McList [j] .Alpha-0.6)*(10/6);} doposisi (); fungsi depthsort ();} depthsort () {var i = 0; var atmp = []; for (i = 0; i <aa.length; i ++) {atmp.push (aa [i]);} atmp.sort (fungsi (vitem1, vitem2) {if (vitem1.cz> vitem2.cz) {vitem) {vitem; {if vitem1.cz> vitem2.cz) {lain lain -1; 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; var i = 0; var max = Mclist.length; var i = 0; OfRagment = document.createDocumentFragment (); // jenis acak untuk (i = 0; i <aa.length; i ++) {atmp.push (aa [i]);} atmp.sort (function () {return Math.random () <0,5? 1: -1;}); untuk (i = 0; i <atmp.length; i ++) {ofragment.AppendChild (ATMP [i]);} odiv.AppendChild (ofRagment); untuk (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.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 ';}} fungsi doposisi () {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-t-t-t-nol [i]. OFFSE le.fontsize = math.ceil (12*Mclist [i] .scale/2)+8+'px'; aa [i] .style.filter = "alpha (opacity ="+100*Mclist [i] .spha+")"; aa [i] .style.opacity = McList [i]. 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);}