主页 » 建站笔记 » 正文

怎么给网站添加high一下的效果

 bandian2018/07/24 09:38 9,294 ℃ 0条点评
小号字体中号字体大号字体
相信你应该玩过本站的“High一下”,是不是很嗨很酷呢?之前就有同学问过我这个的实现代码,也答复过,但是说的不够详细,现在将详细的教程放出来。一共需要3...

相信你应该玩过本站的“High一下”,是不是很嗨很酷呢?之前就有同学问过我这个的实现代码,也答复过,但是说的不够详细,现在将详细的教程放出来。
一共需要3个文件,js、css和音乐文件。音乐文件自备,下面是css和js完整代码。
已将js和css文件打包放在本文末尾了。
css部分:

.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;}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;}

完整复制上面的css代码,将css文件和准备的音乐文件上传到服务器中,然后将下面的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])
                    }
                },
                13000)
            },
            true);
            e.addEventListener("ended",
            function() {
                N();
                h()
            },
            true);
            e.innerHTML = " 

If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser. 
";
            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://cdn.augsky.com/music/hi_moscow.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 = "/wp-content/themes/Initial/res/css/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)
            }
        }
    })()
}[/code]
将上面代码中的css文件路径和音乐文件路劲修改为你刚才上传到的路径,然后保存为hi.js(命名随意)上传到服务器。就是这两行:
[code lang="Javascript" start="" highlight=""]
var i = "http://cdn.augsky.com/music/hi_moscow.mp3";
...
var f = "/wp-content/themes/Initial/res/css/hi.css";
[/code]
然后在网站的页脚模板中引入刚才建立的js文件,wordpress可以直接在footer.php中添加如下代码:
[code lang="html" start="" highlight=""]
<script src="<?php bloginfo('template_url'); ?>/js/hi.js">

最后在页面中添加激活效果的链接或按钮就可以了,类似下面这样:
<a onclick="hig();">High一下</a>

最初这个效果是刚开始学习弄站的时候在v7v3那边看到的,当时觉得简直碉堡了,但是不知道是怎么实现的,弱弱的也不会抠代码。。。于是跑到群里去问,然后老白就去把代码弄过来了。
综上,代码的原始出处我无从得知,也不知道作者是谁,只能在这里说声感谢!同时也感谢v7v3老白

文件打包下载:JS+CSS打包下载

上一篇:霍比特人123全集+魔戒三部曲torrent高清BT下载
下一篇:[豆瓣8.6分]Big Hero 6超能陆战队720p1080p高清片源分享
版权信息
本文遵循 BY-NC-SA 共享方式,永久链接:https://www.augsky.com/?p=844
转载请注明转自 » 格部落格 » 怎么给网站添加high一下的效果

已有0条评论,欢迎点评!

骚年,现在来一发沙发就是你的。