Я видел очень интересное облако тега, 3D сферическое, совместимое с IE 8, доступное для личного тестирования! Другие версии не были проверены. Если вы думаете, что это интересно, пожалуйста, запишите это и изучите его. Адрес статьи, которую я прочитал, будет опубликован ниже этой статьи. Давайте посмотрим на эффект:
Далее находится код, HTML + CSS + JS, который не основан на jQuery, поэтому нет необходимости вводить его. Вы можете увидеть эффект после копирования кода:
<div id="div1"><a href="http://www.cnblogs.com/ntt1219/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Forget the taste</a><a href="http://www.cnblogs.com/ntt1219/" rel="external nofollow" rel = "внешний nofollow" rel = "внешний nofollow"> забудьте вкус </a> <a href = "http://www.cnblogs.com/ntt1219/" rel = "Внешний nofollo href = "http://www.cnblogs.com/ntt1219/" rel = "внешний nofollow" rel = "внешний nofollow" rel = "внешний nofollow"> забудьте вкус </a> </div>
Body {founal: #000 url (index.png) No-Repeat Center 230px;} #div1 {position: относительно; Ширина: 450px; Высота: 450px; Маржа: 20px Auto 0; }#div1 a {position: Absolute; Верх: 0px; слева: 0px; Семейство шрифта: Microsoft Yahei; Цвет: #fff; шрифт-вес: жирный шрифт; Текстовое декорация: нет; Заполнение: 3px 6px; } #Div1 A: Hover {Border: 1px Solid #EEE; Фон: #000; }#div1 .blue {color: blue;}#div1 .red {color: red;}#div1 .olellow {color: hello;} var radius = 120; var dtr = math.pi/180; var d = 300; var mclist = []; var active = false; var last = 1; var lastb = 1; var dift = true; var speed = 10; var size = 250; var mousex = 0; var mousey = 0; var howelliptical = 1; var aa = null; var; var 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);} синекозин ( 0,0,0); poysalall (); 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);}; update () rave (var; vAr; vAR; I. (-Math.min (math.max (-mousey, -Size), size) / radius) * speed; b = (math.min (math.max (-mousex, -size), size) / radius) * speed;} else {a = последний * 0,98; b = последний * 0,98;} lasta = a; a; Math.abs (b) <= 0,01) {return;} var c = 0; sinecosine (a, b, c); for (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*cc; var ry3 = rx2*scc2*scc2*cc+rx2*scc2*scc2*scc2*scc2*scc2*scc2*scc2*scc2*scc2*scc2*scc2*scc2*scc2*scc2*scc2*scc2*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)-(какээлтиппическая*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 (); DefySort ();} функция DefySsort () {var i = 0; var atmp = []; для (i = 0; i <aa.length; i ++) {atmp.push (aa [i]);} atmp.sort (function (vitem1, item2) {if (item1.cz> vitem2.cz) {return -1; 1;} else {return 0;}}); for (i = 0; i <atmp.length; i ++) {atmp [i] .style.zindex = i;}} function posicalal 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; я <макс+1; i ++) {if (divid) {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 = радиус * 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 (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] le.fontsize = math.ceil (12*mclist [i] .scale/2)+8+'px'; aa [i] .style.filter = "alpha (opacity ="+100*mclist [i] .alpha+")"; aa [i] .Style.Opcality = 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);};