나는 매우 흥미로운 태그 클라우드, 3D 구형, IE 8과 호환되는 개인 테스트에 사용할 수있는 것을 보았습니다! 다른 버전은 테스트되지 않았습니다. 흥미 롭다고 생각되면 녹음하고 공부하십시오. 내가 읽은 기사의 주소는이 기사 아래에 발표됩니다. 효과를 살펴 보겠습니다.
다음은 jQuery를 기반으로하지 않는 HTML + CSS + JS 코드이므로 소개 할 필요가 없습니다. 코드를 복사 한 후 효과를 볼 수 있습니다.
<div id = "div1"> <a href = "http://www.cnblogs.com/ntt1219/"rel = "external nofollow"rel = "external nofollow"rel = "external nofollow"> 취향 </a> <a href = "http://www.cnblogs.com/"el nofollow "rel ="외부 nofollow "rel ="외부 nofollow "> 취향 잊어 버린 </a> <a href ="http://www.cnblogs.com/ntt1219/ "rel ="external nofollow "rel ="외부 nofollow "rel ="external nofollow "> 취향 </a> href = "http://www.cnblogs.com/ntt1219/"rel = "외부 nofollow"rel = "외부 nofollow"rel = "외부 nofollow"> 취향 </a> </div>
Body {배경 : #000 URL (Index.png) No-Repeat Center 230px;} #div1 {위치 : 상대; 너비 : 450px; 높이 : 450px; 마진 : 20px auto 0; }#div1 a {위치 : 절대; 상단 : 0px; 왼쪽 : 0px; Font-Family : Microsoft Yahei; 색상 : #fff; 글꼴 중량 : 대담한; 텍스트 결정 : 없음; 패딩 : 3px 6px; } #div1 a : hover {테두리 : 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 last = 1; var lastb = 1; var hass = true; var speed = 10; var size = 250; var mousex = 0; var mousey = 0; var howelliptical = 1; var aa = null; var Odiv = null; 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.offsetop+odiv.offsetheight/2); mousex/= 5; mousey/= 5;}; setinterval (update, 30); var () {var a; (-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; math.abs (b) <= 0.01) {return;} var c = 0; sinecosine (a, b, c); for (var j = 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; var ry3 = rx2*sc+ry2*cc; rz3 = rz2; mclist [j] .cx = rx3; mclist [j] .cy = ry3; mclist [j] .cz = rz3; per = d/(d+rz3); mclist [j] .x = (Howelliptic*rx3*per)-(Howellipal*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 if (vitem1.cz) 1;} else {return 0;}}); for (i = 0; i <atmp.length; i ++) {atmp [i] .style.zindex = i;}} function positionall () {var phi = 0; var max = mclist.length; var i = 0; var atmp = []; var ofragment = document.createdOcumentFragment (); // 랜덤 정렬 (i = 0; i <aa.length; i ++) {atmp.push (aa [i]);} atmp.sort (function () {return math.random () <0.5? 1 : -1;}); for (i = 0; i <atmp.length; i ++) {ofragment.appendChild (atmp [i]);} odiv.appendChild (ofragment); for (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.pi); 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 ';}} 함수 doposition () {var l = odiv.offsetwidth/2; var t = odiv.offsetheight/2; for 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'; aa [i] .style.filter = "alpha (incacity ="+100*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);}