لقد رأيت سحابة علامات ممتعة للغاية ، كروية ثلاثية الأبعاد ، متوافقة مع 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"> نسيان المذاق </a> <a href = "http://www.cn. nofollow "rel =" خارجي nofollow "rel =" خارجي nofollow "> نسيان الذوق </a> <a href =" http://www.cnblogs.com/ntt1219/ "rel =" nofollow " href = "http://www.cnblogs.com/ntt1219/" rel = "خارجي nofollow" rel = "خارجي nofollow" rel = "خارجي nofollow"> نسيان الذوق </a> </viv>
body {background: #000 url (index.png) no-repeat center 230px ؛} #div1 {position: relative ؛ العرض: 450 بكسل ؛ الارتفاع: 450 بكسل ؛ الهامش: 20px Auto 0 ؛ }#div1 a {position: absolute ؛ أعلى: 0px ؛ اليسار: 0px ؛ Font-Family: Microsoft Yahei ؛ اللون: #fff ؛ خط الرصيف: جريئة ؛ تدمير النص: لا شيء ؛ الحشو: 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 = [] 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) ؛ 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+odiv.offsetheight/2) ؛ mousex/= 5 ؛ mousey/= 5 ؛} ؛ (-math.min (math.max (-mousey ، -size) ، الحجم) / نصف قطرها) * السرعة ؛ 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 ؛ j <mclist.length ؛ j ++) {var rx1 = 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* rz3 = rz2 ؛ mclist [j] .cx = rx3 ؛ mclist [j] .cy = ry3 ؛ mclist [j] .cz = rz3 ؛ per = d/(d+rz3) ؛ mclist [j] ] DepthSort () {var i = 0 ؛ var atmp = [] ؛ for (i = 0 ؛ i <aa.length ؛ i ++) {atmp.push (aa [i]) ؛ 1 ؛} آخر {return 0 ؛}}) ؛ لـ (i = 0 ؛ i <atmp.length ؛ i ++) {atmp [i] ofragment = document.createdOcumentFragment () ؛ // sort random for (i = 0 ؛ i <aa.length ؛ i ++) {atmp.push (aa [i]) ؛} atmp.sort (function () {return Math.Random () <0.5؟ 1: -1 ؛}) ؛ لـ (i = 0 ؛ i <atmp.length ؛ i ++) {ofragment.appendchild (atmp [i]) ؛} odiv.appendchild (ofragment) ؛ for (var i = 1 ؛ أنا <max+1 ؛ i ++) {if (distr) {phi = math.acos (-1+ (2*i-1)/max) ؛ theta = math.sqrt (max*math.pi)*phi ؛} آخر {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.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] le.fontsize = math.ceil (12*mclist [i] .scale/2)+8+'px' ؛ aa [i] .style.filter = "alpha (opatited ="+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) ؛}