鸡西网—微信标志
  • 鸡西网站制作
  • 鸡西网客服热线已更改为”400-0467-004“,请广大客户周知。
  • 鸡西网站设计为您提供免费技术问答.如有您有计算机的相关问题欢迎前来咨询!
  • 敢不敢在鸡西网High一下
  • 网站地图

鸡西网站设计 High一下教程

WordPress Danny.✔ 3219浏览 0评论 百度收否

鸡西网站设计今天在群里看到有朋友发出一个带有High一下效果的网站。不少朋友都觉得不错,挺好玩。现整理教程如下。还请看了教程的朋友能和我们做个链接啊。还有,如果大家复制了我的教程,也麻烦注明一下出处做个原文的链接啊,谢谢啊。。。

 

High一下教程共分六步。

注意:第一步和第五步,也可以在后台操作,这里就不细说了。

第一步 修改主题的style.css

打开style.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{background-color:rgba(0,0,0,0);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;}

保存,覆盖上传到主题目录。

第二步 为主题建立hi.css

在主题目录中建立一个hi.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;}

保存,上传到主题目录。

第三步 为主题建立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://www.7vnet.com/wp-content/themes/seven/music/love.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.7vnet.com/wp-content/themes/seven/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)

}

}

})()

}

第四步 修改hi.js

找到hi.js文件的第221行,把http://www.7vnet.com/wp-content/themes/seven/music/love.mp3修改成你自己歌曲的URL!
找到hi.js文件的第231行,把http://www.7vnet.com/wp-content/themes/seven/hi.css修改成你自己的hi.css的URL!
修改完成后,保存hi.js上传到你主题的js目录中。

第五步 修改主题的footer.php

打开footer.php文件,找到</body>,并在</body>前 加入如下代码。

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

保存,覆盖上传到主题目录。

第六步 添加High一下的链接

以上步骤都操作完之后,我们就可以为主题添加一个High一下的链接了,鸡西网站设计是把链接添加到了D8的最新消息中。你也可以根据自己的实际需要,把一下代码放到页面中。

有停止提示的链接方式

<a href="javascript:void(0);" onclick="hig();javascript:alert('你点了High一下,你要是High够了,就刷新一下页面吧!^_^');">High一下</a>

无停止提示的链接方式

<a href="javascript:void(0);" onclick="hig();">High一下</a>

转载请注明:七网科技 » 鸡西网站设计 High一下教程

发表我的评论
取消评论

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (8)

  1. 受教了,白掌柜的辛苦了
    掌柜爱前门2013-12-10 14:29 回复
    • 感谢来访!好使就行,难免有时会有问题,欢迎及时说明。
      Danny.✔2013-12-10 14:31 回复
  2. 支持下。。。
    无名科技2013-12-11 18:59 回复
  3. 这个支持2.3不?
    无名科技2013-12-20 18:11 回复
    • 支持!
      Danny.✔2013-12-20 19:38 回复
  4. 必须支持。折腾了个玩玩
    chenshoy2014-01-07 11:41 回复
    • 感谢对鸡西网的支持,你可以随便修改歌曲的。
      Danny.✔2014-01-09 08:36 回复