本文最后更新于2022年5月18日,已超过 1 年没有更新,如果文章内容失效,请 反馈 给我们,谢谢!
一步一步来看仔细共5步
第一步 、建立hi.css
第二步 、建立hi.js
第三步 、引用hi.js
第四步 、修改主题的footer.php
第五步 、添加High一下的链接
第二步 、建立hi.js
第三步 、引用hi.js
第四步 、修改主题的footer.php
第五步 、添加High一下的链接
第一步 在根目录建立hi.css
@charset "utf-8"; body { -webkit-backface-visibility:hidden } .mw-strobe_light { position:fixed; width:100%; height:100%; top:0; left:0; z-index:100000; background-color:rgba(250,250,250,0.8); display:block } .mw-harlem_shake_me { transition:all 0.8s ease-in-out; -moz-transition:all 0.8s ease-in-out; -webkit-transition:all 0.8s ease-in-out; -o-transition:all 0.8s ease-in-out; -ms-transition:all 0.8s ease-in-out; animation:spin 1s infinite linear; -moz-animation:spin 1s infinite linear; -webkit-animation:spin 1s infinite linear; -o-animation:spin 1s infinite linear; -ms-animation:spin 1s infinite linear } .mw-harlem_shake_slow { transition:all 3.2s ease-in-out; -moz-transition:all 3.2s ease-in-out; -webkit-transition:all 3.2s ease-in-out; -o-transition:all 3.2s ease-in-out; -ms-transition:all 3.2s ease-in-out; animation:spin 4s infinite linear; -moz-animation:spin 4s infinite linear; -webkit-animation:spin 4s infinite linear; -o-animation:spin 4s infinite linear; -ms-animation:spin 4s infinite linear } .mw-harlem_shake_me { -webkit-animation-duration:.4s; -moz-animation-duration:.4s; -o-animation-duration:.4s; animation-duration:.4s; -webkit-animation-fill-mode:both; -moz-animation-fill-mode:both; -o-animation-fill-mode:both; animation-fill-mode:both } .mw-harlem_shake_slow { -webkit-animation-duration:1.6s; -moz-animation-duration:1.6s; -o-animation-duration:1.6s; animation-duration:1.6s; -webkit-animation-fill-mode:both; -moz-animation-fill-mode:both; -o-animation-fill-mode:both; animation-fill-mode:both } .flash,.mw-strobe_light { -webkit-animation-name:flash; -moz-animation-name:flash; -o-animation-name:flash; animation-name:flash } @-webkit-keyframes shake { 0%,100% { -webkit-transform:translateX(0) } 10%,30%,50%,70%,90% { -webkit-transform:translateX(-10px) } 20%,40%,60%,80% { -webkit-transform:translateX(10px) } }@-moz-keyframes shake { 0%,100% { -moz-transform:translateX(0) } 10%,30%,50%,70%,90% { -moz-transform:translateX(-10px) } 20%,40%,60%,80% { -moz-transform:translateX(10px) } }@-o-keyframes shake { 0%,100% { -o-transform:translateX(0) } 10%,30%,50%,70%,90% { -o-transform:translateX(-10px) } 20%,40%,60%,80% { -o-transform:translateX(10px) } }@keyframes shake { 0%,100% { transform:translateX(0) } 10%,30%,50%,70%,90% { transform:translateX(-10px) } 20%,40%,60%,80% { transform:translateX(10px) } }.shake,.im_baked { -webkit-animation-name:shake; -moz-animation-name:shake; -o-animation-name:shake; animation-name:shake } .swing,.im_drunk { -webkit-transform-origin:top center; -moz-transform-origin:top center; -o-transform-origin:top center; transform-origin:top center; -webkit-animation-name:swing; -moz-animation-name:swing; -o-animation-name:swing; animation-name:swing } @-webkit-keyframes wobble { 0% { -webkit-transform:translateX(0%) } 15% { -webkit-transform:translateX(-15%) rotate(-4deg) } 30% { -webkit-transform:translateX(12%) rotate(3deg) } 45% { -webkit-transform:translateX(-9%) rotate(-2deg) } 60% { -webkit-transform:translateX(6%) rotate(2deg) } 75% { -webkit-transform:translateX(-3%) rotate(-1deg) } 100% { -webkit-transform:translateX(0%) } }@-moz-keyframes wobble { 0% { -moz-transform:translateX(0%) } 15% { -moz-transform:translateX(-15%) rotate(-5deg) } 30% { -moz-transform:translateX(12%) rotate(3deg) } 45% { -moz-transform:translateX(-9%) rotate(-3deg) } 60% { -moz-transform:translateX(6%) rotate(2deg) } 75% { -moz-transform:translateX(-3%) rotate(-1deg) } 100% { -moz-transform:translateX(0%) } }@-o-keyframes wobble { 0% { -o-transform:translateX(0%) } 15% { -o-transform:translateX(-15%) rotate(-5deg) } 30% { -o-transform:translateX(12%) rotate(3deg) } 45% { -o-transform:translateX(-9%) rotate(-3deg) } 60% { -o-transform:translateX(6%) rotate(2deg) } 75% { -o-transform:translateX(-3%) rotate(-1deg) } 100% { -o-transform:translateX(0%) } }@keyframes wobble { 0% { transform:translateX(0%) } 15% { transform:translateX(-15%) rotate(-5deg) } 30% { transform:translateX(12%) rotate(3deg) } 45% { transform:translateX(-9%) rotate(-3deg) } 60% { transform:translateX(6%) rotate(2deg) } 75% { transform:translateX(-3%) rotate(-1deg) } 100% { transform:translateX(0%) } }.wobble,.im_first { -webkit-animation-name:wobble; -moz-animation-name:wobble; -o-animation-name:wobble; animation-name:wobble } @-webkit-keyframes pulse { 0% { -webkit-transform:scale(1) } 50% { -webkit-transform:scale(1.1) } 100% { -webkit-transform:scale(1) } }@-moz-keyframes pulse { 0% { -moz-transform:scale(1) } 50% { -moz-transform:scale(1.1) } 100% { -moz-transform:scale(1) } }@-o-keyframes pulse { 0% { -o-transform:scale(1) } 50% { -o-transform:scale(1.1) } 100% { -o-transform:scale(1) } }@keyframes pulse { 0% { transform:scale(1) } 50% { transform:scale(1.1) } 100% { transform:scale(1) } }.pulse,.im_blown { -webkit-animation-name:pulse; -moz-animation-name:pulse; -o-animation-name:pulse; animation-name:pulse } @-webkit-keyframes bounceIn { 0% { opacity:0; -webkit-transform:scale(.3) } 50% { opacity:1; -webkit-transform:scale(1.05) } 70% { -webkit-transform:scale(.9) } 100% { -webkit-transform:scale(1) } }@-moz-keyframes bounceIn { 0% { opacity:0; -moz-transform:scale(.3) } 50% { opacity:1; -moz-transform:scale(1.05) } 70% { -moz-transform:scale(.9) } 100% { -moz-transform:scale(1) } }@-o-keyframes bounceIn { 0% { opacity:0; -o-transform:scale(.3) } 50% { opacity:1; -o-transform:scale(1.05) } 70% { -o-transform:scale(.9) } 100% { -o-transform:scale(1) } }@keyframes bounceIn { 0% { opacity:0; transform:scale(.3) } 50% { opacity:1; transform:scale(1.05) } 70% { transform:scale(.9) } 100% { transform:scale(1) } }.bounceIn,.im_trippin { -webkit-animation-name:bounceIn; -moz-animation-name:bounceIn; -o-animation-name:bounceIn; animation-name:bounceIn }
第二步建立hi.js
function hig() { (function() { function c() { $(".mw_added_css").remove(); var e = document.createElement("link"); e.setAttribute("type", "text/css"); e.setAttribute("rel", "stylesheet"); e.setAttribute("href", f); e.setAttribute("class", l); document.body.appendChild(e) } function h() { var e = document.getElementsByClassName(l); for (var t = 0; t < e.length; t++) { document.body.removeChild(e[t]) } } function p() { var e = document.createElement("div"); e.setAttribute("class", a); document.body.appendChild(e); setTimeout(function() { document.body.removeChild(e) }, 100) } function d(e) { return { height: e.offsetHeight, width: e.offsetWidth } } function v(i) { var s = d(i); return s.height > e && s.height < n && s.width > t && s.width < r } function m(e) { var t = e; var n = 0; while ( !! t) { n += t.offsetTop; t = t.offsetParent } return n } function g() { var e = document.documentElement; if ( !! window.innerWidth) { return window.innerHeight } else if (e && !isNaN(e.clientHeight)) { return e.clientHeight } return 0 } function y() { if (window.pageYOffset) { return window.pageYOffset } return Math.max(document.documentElement.scrollTop, document.body.scrollTop) } function E(e) { var t = m(e); return t >= w && t <= b + w } function S() { $("audio").remove(); var e = document.createElement("audio"); e.setAttribute("class", l); e.src = i; e.loop = false; e.addEventListener("canplay", function() { setTimeout(function() { x(k) }, 500); setTimeout(function() { N(); p(); for (var e = 0; e < O.length; e++) { T(O[e]) } }, 5000) }, true); e.addEventListener("ended", function() { N(); h() }, true); e.innerHTML = " <p>如果你正在读这篇文章,那是因为你的浏览器不支持音频元素。我们建议你得到一个新的浏览器。</p> <p>"; document.body.appendChild(e); e.play() } function x(e) { e.className += " " + s + " " + o } function T(e) { e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)] } function N() { var e = document.getElementsByClassName(s); var t = new RegExp("\\b" + s + "\\b"); for (var n = 0; n < e.length;) { e[n].className = e[n].className.replace(t, "") } } var e = 30; var t = 30; var n = 350; var r = 350; var i = CrazyMusic[Math.floor(Math.random() * Number(CrazyMusic.length))]; var f = hicss; var s = "mw-harlem_shake_me"; var o = "im_first"; var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"]; var a = "mw-strobe_light"; var l = "mw_added_css"; var b = g(); var w = y(); var C = document.getElementsByTagName("*"); var k = null; for (var L = 0; L < C.length; L++) { var A = C[L]; if (v(A)) { if (E(A)) { k = A; break } } } if (A === null) { return } c(); S(); var O = []; for (var L = 0; L < C.length; L++) { var A = C[L]; if (v(A)) { O.push(A) } } })() }; function stopCrazy() { $("audio").remove(); $(".mw_added_css").remove() }
第三步 在页面底部引用hi.js
<script type='text/javascript' src='/hi.js'></script>
第四步 将下面代码放到主题的footer.php中
<script type="text/javascript"> /* 定义 hi.css */ var hicss="/hi.css"; /* 定义歌曲数组 */ var CrazyMusic=[ "http://www.ytmp3.cn/down/77158.mp3", "http://www.ytmp3.cn/down/77167.mp3", "http://www.ytmp3.cn/down/77020.mp3", "http://www.ytmp3.cn/down/77161.mp3" ]; /* 监听到 ESC 或鼠标双击动作,将停止所有效果 */ function KeyMonitor() { if (event.keyCode == 27) {stopCrazy()}; } $(document).bind("dblclick",stopCrazy); $(document).bind("onkeydown ",KeyMonitor); </script>
第五部 触发按钮
<a title="亲,点我放松一下吧~!(单击启动,双击或 ESC 停止)" id="hig" href="javascript:void(0);" onclick="hig();" ondblclick="location.reload(true);">点我嗨一下</a>