私は非常に興味深いタグクラウド、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);}