huanggr
再打开一些页面的时候，我们可以发现有些页面会出现爱国主义16字，那么我们怎么去实现呢，接下来我们就来一起解析一下吧（点击的可以换为onclick，现在用的是onmousemove）。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none; } </style> </head> <body> </body> </html> <script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function ($) { $("body").click(function (e) { var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"); var $i = $("<span/>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 99999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "#ff6651" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function () { $i.remove(); }); }); }); var clickNum = 0; var $html = document.getElementsByTagName("html")[0]; var $body = document.getElementsByTagName("body")[0]; var txt = ["富强", "?", "民主", "?", "文明", "?", "和谐", "?", "自由", "✌", "平等", "?", "公正", "?", "法治", "?", "爱国", "?", "敬业", "?", "诚信", "?", "友善" ]; $html.onmousemove = function (e) { var $elem = document.createElement("b"); $elem.style.color = "#E94F06"; $elem.style.zIndex = 9999; $elem.style.position = "absolute"; $elem.style.select = "none"; var x = e.pageX; var y = e.pageY; $elem.style.left = (x - 10) + "px"; $elem.style.top = (y - 20) + "px"; clearInterval(anim); $elem.innerText = txt[(clickNum++) % (txt.length)]; $elem.style.fontSize = Math.random() * 10 + 8 + "px"; var increase = 0; var anim; setTimeout(function () { anim = setInterval(function () { if (++increase == 150) { clearInterval(anim); $body.removeChild($elem); } $elem.style.top = y - 20 - increase + "px"; $elem.style.opacity = (150 - increase) / 120; }, 8); }, 70); $body.appendChild($elem); } </script> |
7