zoukankan html css js c++ java

让你的网站high起来

最初是在陌小雨的网站上看见这个功能，赶脚很牛逼的样子，于是给自己的网站加上了。在我网站首页的轮播图上面那个按钮就能实现这个功能，当然这里你点击右边的这个链接也可以看到效果——>点此嗨一下。
效果就是你点击了这个按钮就会播放背景音乐，同时会让你网页的内容有节奏的跳动，很有逼格啊有木有？！网上很多代码都有一些问题，我做了一些修改，不多说，下面是实现方法：
1、在主题css最后面增加如下代码：

展开/收缩

.btn-link {
    border-radius: 0;
    color: #428BCA;
    cursor: pointer;
    font-weight: normal;
}
 
.btn-link, .btn-link:active, .btn-link[disabled], fieldset[disabled] .btn-link {
    
    box-shadow: none;
}
 
.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
    border-color: rgba(0, 0, 0, 0);
}
 
.btn-link:hover, .btn-link:focus {
    background-color: rgba(0, 0, 0, 0);
    color: #2A6496;
    text-decoration: none;
}
 
.btn-link[disabled]:hover, fieldset[disabled] .btn-link:hover, .btn-link[disabled]:focus, fieldset[disabled] .btn-link:focus {
    color: #999999;
    text-decoration: none;
}

2、新建hi.css文件，加入如下代码:

展开/收缩

@charset "utf-8";
/* CSS Document */
 
.mw-strobe_light {
    position: fixed;
     100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100000;
    
    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;
}
 
body {
    -webkit-backface-visibility: hidden;
}
 
.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;
}

3、新建hi.js文件，加入如下代码：

展开/收缩

function hig() 
{
    (function () 
    {
        function c() 
        {
            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() 
        {
            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]) 
                    }
                }, 15500) 
            }, true);
            e.addEventListener("ended", function () 
            {
                N();
                h() 
            }, true);
            e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</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 = 1;
        var t = 1;
        var n = 1100;
        var r = 1100;
        var i = "http://7xnarc.com1.z0.glb.clouddn.com/Bar%20Bar%20Bar.mp3";
        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 f = "http://www.shenjieblog.com/wp-content/themes/hueman/hi.css";
        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) {
            console.warn("Could not find a node of the right size. Please try a different page.");
            return
        }
        c();
        S();
        var O = [];
        for (var L = 0; L < C.length; L++) {
            var A = C[L];
            if (v(A)) {
                O.push(A) 
            }
        }
    })() 
}

4、修改上面代码中的音乐链接和css链接，保存后上传至主题js目录下
5、在footer.php中，在前加入一下代码：

<script src="<?php bloginfo('template_url'); ?>/js/hi.js"></script>

6、在网站相应位置添加high一下链接：这里提供两种
（1）按钮

<button type="button" class="btn btn-link" onclick="hig();">High一下</button>

（2）超链接

<span style="color: #ff00ff;"><strong><a href="javascript:void(0);" onclick="hig();javascript:alert('你点了High一下，你要是High够了，刷新页面即停止！^_^');">点此嗨一下</a></strong></span>

当然如果你觉得麻烦的话，我这里也提供了一个我打包好的所有文件和我使用的音乐，如果你需要的话可以下载试试。
下载地址：http://yunpan.cn/cFb3YTNRqSW8A 访问密码 71b0

本文转载自：http://www.dedewp.com/577.html【部分内容有修改更正过】

查看全文

相关阅读:
iOS汇编系列-汇编入门
 C开发系列-指针
 iOS开发系列-LLVM、Clang
java开发系列-Http协议
 iOS开发系列-SQLite
iOS逆向系列-theos
<Java><类加载机制><反射>
<Java><！！！><面试题>
<Java><修饰符>
<Java><类与对象><OOP>

原文地址：https://www.cnblogs.com/shenjieblog/p/5061309.html