ฉันเห็นแท็กเมฆที่น่าสนใจมากทรงกลม 3 มิติเข้ากันได้กับ IE 8 พร้อมสำหรับการทดสอบส่วนตัว! เวอร์ชันอื่นยังไม่ได้รับการทดสอบ หากคุณคิดว่ามันน่าสนใจโปรดบันทึกและศึกษา ที่อยู่ของบทความที่ฉันอ่านจะได้รับการเผยแพร่ด้านล่างบทความนี้ มาดูเอฟเฟกต์กันเถอะ:
ถัดไปคือรหัส HTML + CSS + JS ซึ่งไม่ได้ขึ้นอยู่กับ jQuery ดังนั้นจึงไม่จำเป็นต้องแนะนำ คุณสามารถดูเอฟเฟกต์หลังจากคัดลอกรหัส:
<div id = "div1"> <a href = "http://www.cnblogs.com/ntt1219/" rel = "external nofollow" rel = "nofollow ภายนอก" rel = "external nofollow"> ลืมรสชาติ </a> <a href = "http://ww.cn nofollow "rel =" external nofollow "rel =" ภายนอก nofollow "> ลืมรสชาติ </a> <a href =" http://www.cnblogs.com/ntt1219/ "rel =" nofollow ภายนอก "rel =" nofollow ภายนอก " href = "http://www.cnblogs.com/ntt1219/" rel = "nofollow ภายนอก" rel = "ภายนอก nofollow" rel = "ภายนอก nofollow"> ลืมรสชาติ </a> </div>
ร่างกาย {พื้นหลัง: #000 url (index.png) ศูนย์การทำซ้ำ 230px;} #div1 {ตำแหน่ง: ญาติ; ความกว้าง: 450px; ความสูง: 450px; มาร์จิ้น: 20px auto 0; }#div1 a {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; ซ้าย: 0px; Font-Family: Microsoft Yahei; สี: #FFF; Font-Weight: ตัวหนา; การตกแต่งข้อความ: ไม่มี; Padding: 3px 6px; } #div1 A: Hover {Border: 1px Solid #EEE; ความเป็นมา: #000; }#div1 .blue {color: blue;}#div1 .ed {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; otag = null; odiv = document.getElementById ('div1'); aa = odiv.getElementsByTagname ('a'); สำหรับ (i = 0; i <aa.length; i ++) {ot ag = {}; otag.offsetWidth = aa [i] .offsetWidth; otag.offSetheight = aa [i] 0,0,0); positiveAll (); 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;}; (-math.min (math.max (-mousey, -size), ขนาด) / radius) * ความเร็ว; b = (math.min (math.max (-mousex, -size), ขนาด) / radius) * ความเร็ว;} {a = สุดท้าย * 0.98; b = lastb * 0.98; Math.Abs (b) <= 0.01) {return;} var c = 0; sinecosine (a, b, c); สำหรับ (var j = 0; j <mclist.length; j ++) {var rx1 = mclist [j] .cx; var ry1 = 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 rz3 = rz2; mclist [j] .cx = rx3; mclist [j]. cy = ry3; mclist [j] .cz = rz3; ต่อ = d/(d+rz3); mclist [j] .x = (howelliptical*rx3*ต่อ) [j] .y = ry3*ต่อ; mclist [j] .scale = per; mclist [j] .alpha = per; mclist [j] .alpha = (mclist [j] .alpha-0.6)*(10/6);} doposition (); ความลึก () {var i = 0; var atmp = []; สำหรับ (i = 0; i <aa.length; i ++) {atmp.push (aa [i]);} atmp.sort (ฟังก์ชั่น (vitem1, vitem2) {ถ้า (vitem1.cz> vitem2.cz 1;} else {return 0;}}); สำหรับ (i = 0; i <atmp.length; i ++) {atmp [i] .style.zindex = i;}} positionall function () {var phi = 0; var theta = 0; var max = mclist.length; Ofragment = document.createdocumentFragment (); // เรียงลำดับแบบสุ่มสำหรับ (i = 0; i <aa.length; i ++) {atmp.push (aa [i]);} atmp.sort (ฟังก์ชัน () {return math.random () <0.5? 1: -1;}); สำหรับ (i = 0; i <atmp.length; i ++) {Ofragment.appendchild (atmp [i]);} odiv.appendchild (การจัดเรียง); สำหรับ (var i = 1; ฉัน <สูงสุด+1; i ++) {ถ้า (distr) {phi = math.acos (-1+ (2*i-1)/สูงสุด); theta = math.sqrt (max*math.pi)*phi;} else {phi = math.random ()*(math.pi); theta = math.random () 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 * 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; สำหรับ (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]. le.fontsize = math.ceil (12*mclist [i] .scale/2)+8+'px'; aa [i] .style.filter = "alpha (opacity ="+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);};