• 原森林之家(foresthouse.cn)改为走私范(zousifan.com),只是改个名内容不变。
  • 网站图片自建立开始到19年全部丢失,血的教训时刻备份,多点备份!

wordpress狂欢一下

wordpress 8年前 (2015-12-07) 1081次浏览 3个评论 扫描二维码
本文最后更新于2022年5月18日,已超过 1 年没有更新,如果文章内容失效,请 反馈 给我们,谢谢!

一步一步来看仔细共5步


第一步 、建立hi.css
第二步 、建立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>

版权所有丨如未注明 , 均为原创丨本网站采用 BY-NC-SA 协议进行授权 , 转载请注明 出处!
喜欢 (3)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
    仅用来给您发送回复提醒。不会公开!
  • 网址
(3)个小伙伴在吐槽
  1. 你网站有病毒广告!如果是博主私自添加的,请考虑下用户体验!
    kaikai2015-12-10 17:32 回复来自天朝的朋友 QQ浏览器  Android 4.4.2 2014501 Build/KOT49H
    • forest
      请看“关于本站”02内容,请对自己的电脑杀毒后再来访问森林之家试试,还是感谢您的反馈。
      forest管理员回复2015-12-10 22:45 回复来自天朝的朋友 谷歌浏览器 Windows 7
  2. 又是个喜欢折腾的人啊
    寻寻觅博客2015-12-08 20:12 回复来自天朝的朋友 谷歌浏览器 Windows 7