私は非常に興味深いタグクラウド、3D球状で、IE 8と互換性があり、個人的なテストに利用できるのを見ました！他のバージョンはテストされていません。面白いと思われる場合は、記録して勉強してください。私が読んだ記事のアドレスは、この記事の下にリリースされます。効果を見てみましょう：
次はコード、HTML + CSS + JSです。これはjQueryに基づいていないため、紹介する必要はありません。コードをコピーした後、効果を確認できます。
<div id = "div1"> <a href = "http://www.cnblogs.com/ntt1219/" rel = "returation nofollow" rel = "fortence nofollow" rel = "external nofollow" nofollow "rel =" external nofollow "rel =" external nofollow ">味を忘れる</a> <a href =" http://www.cnblogs.com/ntt1219/ "rel =" returation nofollow "rel =" external nofollow "rel =" external nofollow " href = "http://www.cnblogs.com/ntt1219/" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow">味を忘れる</a> </div>
body {background：＃000 url（index.png）No-Repeat Center 230px;}＃div1 {position：relative;幅：450px;高さ：450px;マージン：20px auto 0; }＃div1 a {position：absolute;上：0px;左：0px;フォントファミリー：Microsoft Yahei;色：#fff; font-weight：bold;テキスト装置：なし;パディング：3px 6px; }＃div1 a：hover {border：1px solid #eee;背景：＃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 lastb = 1; var dist = true; var size = 250; var mousey = 0; var mousey = 0; var howelliptical = 1; var = null; var i. 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）;} sinecosine（} 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+ofsiv.offsetheight/2）; mousex/= 5; mousey/= 5;}; setinterval（update）、update（update）; （-math.min（math.max（-mousey、size）、size） / radius） * speed; b =（math.max（-mousex、size）、size） / radius） * speed;} Math.Abs（b）<= 0.01）{return;} var c = 0; sinecosine（a、b、c）; 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 = rmid 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）;} doposition（）; depthsort（）;}関数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 -vitem1; 1;} else {return 0;}}）; ofragment = document.createdocumentfragment（）; //ランダムソート（i = 0; i <aa.length; i ++）{atmp.push（aa [i]）;} atmp.sort（function（）{return math.random（）<0.5？1：-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）; 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.offseetheight/2-mclist [i-1] .offseeth/2+' px ';}}関数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] .offseight/2+'px' 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）;}