• 原森林之家（foresthouse.cn）改为走私范（zousifan.com），只是改个名内容不变。
  • 网站图片自建立开始到19年全部丢失，血的教训时刻备份，多点备份！
> 学无止境 > wordpress > wordpress狂欢一下

wordpress狂欢一下

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

一步一步来看仔细共5步


第一步 、建立hi.css
第二步 、建立hi.js
第三步 、引用hi.js
第四步 、修改主题的footer.php
第五步 、添加High一下的链接

第一步 在根目录建立hi.css

  1. @charset "utf-8";
  2. 	body {
  3. 	-webkit-backface-visibility:hidden
  4. }
  5. .mw-strobe_light {
  6. 	position:fixed;
  7. 	width:100%;
  8. 	height:100%;
  9. 	top:0;
  10. 	left:0;
  11. 	z-index:100000;
  12. 	background-color:rgba(250,250,250,0.8);
  13. 	display:block
  14. }
  15. .mw-harlem_shake_me {
  16. 	transition:all 0.8s ease-in-out;
  17. 	-moz-transition:all 0.8s ease-in-out;
  18. 	-webkit-transition:all 0.8s ease-in-out;
  19. 	-o-transition:all 0.8s ease-in-out;
  20. 	-ms-transition:all 0.8s ease-in-out;
  21. 	animation:spin 1s infinite linear;
  22. 	-moz-animation:spin 1s infinite linear;
  23. 	-webkit-animation:spin 1s infinite linear;
  24. 	-o-animation:spin 1s infinite linear;
  25. 	-ms-animation:spin 1s infinite linear
  26. }
  27. .mw-harlem_shake_slow {
  28. 	transition:all 3.2s ease-in-out;
  29. 	-moz-transition:all 3.2s ease-in-out;
  30. 	-webkit-transition:all 3.2s ease-in-out;
  31. 	-o-transition:all 3.2s ease-in-out;
  32. 	-ms-transition:all 3.2s ease-in-out;
  33. 	animation:spin 4s infinite linear;
  34. 	-moz-animation:spin 4s infinite linear;
  35. 	-webkit-animation:spin 4s infinite linear;
  36. 	-o-animation:spin 4s infinite linear;
  37. 	-ms-animation:spin 4s infinite linear
  38. }
  39. .mw-harlem_shake_me {
  40. 	-webkit-animation-duration:.4s;
  41. 	-moz-animation-duration:.4s;
  42. 	-o-animation-duration:.4s;
  43. 	animation-duration:.4s;
  44. 	-webkit-animation-fill-mode:both;
  45. 	-moz-animation-fill-mode:both;
  46. 	-o-animation-fill-mode:both;
  47. 	animation-fill-mode:both
  48. }
  49. .mw-harlem_shake_slow {
  50. 	-webkit-animation-duration:1.6s;
  51. 	-moz-animation-duration:1.6s;
  52. 	-o-animation-duration:1.6s;
  53. 	animation-duration:1.6s;
  54. 	-webkit-animation-fill-mode:both;
  55. 	-moz-animation-fill-mode:both;
  56. 	-o-animation-fill-mode:both;
  57. 	animation-fill-mode:both
  58. }
  59. .flash,.mw-strobe_light {
  60. 	-webkit-animation-name:flash;
  61. 	-moz-animation-name:flash;
  62. 	-o-animation-name:flash;
  63. 	animation-name:flash
  64. }
  65. @-webkit-keyframes shake {
  66. 	0%,100% {
  67. 	-webkit-transform:translateX(0)
  68. }
  69. 10%,30%,50%,70%,90% {
  70. 	-webkit-transform:translateX(-10px)
  71. }
  72. 20%,40%,60%,80% {
  73. 	-webkit-transform:translateX(10px)
  74. }
  75. }@-moz-keyframes shake {
  76. 	0%,100% {
  77. 	-moz-transform:translateX(0)
  78. }
  79. 10%,30%,50%,70%,90% {
  80. 	-moz-transform:translateX(-10px)
  81. }
  82. 20%,40%,60%,80% {
  83. 	-moz-transform:translateX(10px)
  84. }
  85. }@-o-keyframes shake {
  86. 	0%,100% {
  87. 	-o-transform:translateX(0)
  88. }
  89. 10%,30%,50%,70%,90% {
  90. 	-o-transform:translateX(-10px)
  91. }
  92. 20%,40%,60%,80% {
  93. 	-o-transform:translateX(10px)
  94. }
  95. }@keyframes shake {
  96. 	0%,100% {
  97. 	transform:translateX(0)
  98. }
  99. 10%,30%,50%,70%,90% {
  100. 	transform:translateX(-10px)
  101. }
  102. 20%,40%,60%,80% {
  103. 	transform:translateX(10px)
  104. }
  105. }.shake,.im_baked {
  106. 	-webkit-animation-name:shake;
  107. 	-moz-animation-name:shake;
  108. 	-o-animation-name:shake;
  109. 	animation-name:shake
  110. }
  111. .swing,.im_drunk {
  112. 	-webkit-transform-origin:top center;
  113. 	-moz-transform-origin:top center;
  114. 	-o-transform-origin:top center;
  115. 	transform-origin:top center;
  116. 	-webkit-animation-name:swing;
  117. 	-moz-animation-name:swing;
  118. 	-o-animation-name:swing;
  119. 	animation-name:swing
  120. }
  121. @-webkit-keyframes wobble {
  122. 	0% {
  123. 	-webkit-transform:translateX(0%)
  124. }
  125. 15% {
  126. 	-webkit-transform:translateX(-15%) rotate(-4deg)
  127. }
  128. 30% {
  129. 	-webkit-transform:translateX(12%) rotate(3deg)
  130. }
  131. 45% {
  132. 	-webkit-transform:translateX(-9%) rotate(-2deg)
  133. }
  134. 60% {
  135. 	-webkit-transform:translateX(6%) rotate(2deg)
  136. }
  137. 75% {
  138. 	-webkit-transform:translateX(-3%) rotate(-1deg)
  139. }
  140. 100% {
  141. 	-webkit-transform:translateX(0%)
  142. }
  143. }@-moz-keyframes wobble {
  144. 	0% {
  145. 	-moz-transform:translateX(0%)
  146. }
  147. 15% {
  148. 	-moz-transform:translateX(-15%) rotate(-5deg)
  149. }
  150. 30% {
  151. 	-moz-transform:translateX(12%) rotate(3deg)
  152. }
  153. 45% {
  154. 	-moz-transform:translateX(-9%) rotate(-3deg)
  155. }
  156. 60% {
  157. 	-moz-transform:translateX(6%) rotate(2deg)
  158. }
  159. 75% {
  160. 	-moz-transform:translateX(-3%) rotate(-1deg)
  161. }
  162. 100% {
  163. 	-moz-transform:translateX(0%)
  164. }
  165. }@-o-keyframes wobble {
  166. 	0% {
  167. 	-o-transform:translateX(0%)
  168. }
  169. 15% {
  170. 	-o-transform:translateX(-15%) rotate(-5deg)
  171. }
  172. 30% {
  173. 	-o-transform:translateX(12%) rotate(3deg)
  174. }
  175. 45% {
  176. 	-o-transform:translateX(-9%) rotate(-3deg)
  177. }
  178. 60% {
  179. 	-o-transform:translateX(6%) rotate(2deg)
  180. }
  181. 75% {
  182. 	-o-transform:translateX(-3%) rotate(-1deg)
  183. }
  184. 100% {
  185. 	-o-transform:translateX(0%)
  186. }
  187. }@keyframes wobble {
  188. 	0% {
  189. 	transform:translateX(0%)
  190. }
  191. 15% {
  192. 	transform:translateX(-15%) rotate(-5deg)
  193. }
  194. 30% {
  195. 	transform:translateX(12%) rotate(3deg)
  196. }
  197. 45% {
  198. 	transform:translateX(-9%) rotate(-3deg)
  199. }
  200. 60% {
  201. 	transform:translateX(6%) rotate(2deg)
  202. }
  203. 75% {
  204. 	transform:translateX(-3%) rotate(-1deg)
  205. }
  206. 100% {
  207. 	transform:translateX(0%)
  208. }
  209. }.wobble,.im_first {
  210. 	-webkit-animation-name:wobble;
  211. 	-moz-animation-name:wobble;
  212. 	-o-animation-name:wobble;
  213. 	animation-name:wobble
  214. }
  215. @-webkit-keyframes pulse {
  216. 	0% {
  217. 	-webkit-transform:scale(1)
  218. }
  219. 50% {
  220. 	-webkit-transform:scale(1.1)
  221. }
  222. 100% {
  223. 	-webkit-transform:scale(1)
  224. }
  225. }@-moz-keyframes pulse {
  226. 	0% {
  227. 	-moz-transform:scale(1)
  228. }
  229. 50% {
  230. 	-moz-transform:scale(1.1)
  231. }
  232. 100% {
  233. 	-moz-transform:scale(1)
  234. }
  235. }@-o-keyframes pulse {
  236. 	0% {
  237. 	-o-transform:scale(1)
  238. }
  239. 50% {
  240. 	-o-transform:scale(1.1)
  241. }
  242. 100% {
  243. 	-o-transform:scale(1)
  244. }
  245. }@keyframes pulse {
  246. 	0% {
  247. 	transform:scale(1)
  248. }
  249. 50% {
  250. 	transform:scale(1.1)
  251. }
  252. 100% {
  253. 	transform:scale(1)
  254. }
  255. }.pulse,.im_blown {
  256. 	-webkit-animation-name:pulse;
  257. 	-moz-animation-name:pulse;
  258. 	-o-animation-name:pulse;
  259. 	animation-name:pulse
  260. }
  261. @-webkit-keyframes bounceIn {
  262. 	0% {
  263. 	opacity:0;
  264. 	-webkit-transform:scale(.3)
  265. }
  266. 50% {
  267. 	opacity:1;
  268. 	-webkit-transform:scale(1.05)
  269. }
  270. 70% {
  271. 	-webkit-transform:scale(.9)
  272. }
  273. 100% {
  274. 	-webkit-transform:scale(1)
  275. }
  276. }@-moz-keyframes bounceIn {
  277. 	0% {
  278. 	opacity:0;
  279. 	-moz-transform:scale(.3)
  280. }
  281. 50% {
  282. 	opacity:1;
  283. 	-moz-transform:scale(1.05)
  284. }
  285. 70% {
  286. 	-moz-transform:scale(.9)
  287. }
  288. 100% {
  289. 	-moz-transform:scale(1)
  290. }
  291. }@-o-keyframes bounceIn {
  292. 	0% {
  293. 	opacity:0;
  294. 	-o-transform:scale(.3)
  295. }
  296. 50% {
  297. 	opacity:1;
  298. 	-o-transform:scale(1.05)
  299. }
  300. 70% {
  301. 	-o-transform:scale(.9)
  302. }
  303. 100% {
  304. 	-o-transform:scale(1)
  305. }
  306. }@keyframes bounceIn {
  307. 	0% {
  308. 	opacity:0;
  309. 	transform:scale(.3)
  310. }
  311. 50% {
  312. 	opacity:1;
  313. 	transform:scale(1.05)
  314. }
  315. 70% {
  316. 	transform:scale(.9)
  317. }
  318. 100% {
  319. 	transform:scale(1)
  320. }
  321. }.bounceIn,.im_trippin {
  322. 	-webkit-animation-name:bounceIn;
  323. 	-moz-animation-name:bounceIn;
  324. 	-o-animation-name:bounceIn;
  325. 	animation-name:bounceIn
  326. }
  327.  

第二步建立hi.js

  1. function hig() { (function() {
  2.         function c() {
  3.             $(".mw_added_css").remove();
  4.             var e = document.createElement("link");
  5.             e.setAttribute("type", "text/css");
  6.             e.setAttribute("rel", "stylesheet");
  7.             e.setAttribute("href", f);
  8.             e.setAttribute("class", l);
  9.             document.body.appendChild(e)
  10.         }
  11.         function h() {
  12.             var e = document.getElementsByClassName(l);
  13.             for (var t = 0; t < e.length; t++) {
  14.                 document.body.removeChild(e[t])
  15.             }
  16.         }
  17.         function p() {
  18.             var e = document.createElement("div");
  19.             e.setAttribute("class", a);
  20.             document.body.appendChild(e);
  21.             setTimeout(function() {
  22.                 document.body.removeChild(e)
  23.             },
  24.             100)
  25.         }
  26.         function d(e) {
  27.             return {
  28.                 height: e.offsetHeight,
  29.                 width: e.offsetWidth
  30.             }
  31.         }
  32.         function v(i) {
  33.             var s = d(i);
  34.             return s.height > e && s.height < n && s.width > t && s.width < r
  35.         }
  36.         function m(e) {
  37.             var t = e;
  38.             var n = 0;
  39.             while ( !! t) {
  40.                 n += t.offsetTop;
  41.                 t = t.offsetParent
  42.             }
  43.             return n
  44.         }
  45.         function g() {
  46.             var e = document.documentElement;
  47.             if ( !! window.innerWidth) {
  48.                 return window.innerHeight
  49.             } else if (e && !isNaN(e.clientHeight)) {
  50.                 return e.clientHeight
  51.             }
  52.             return 0
  53.         }
  54.         function y() {
  55.             if (window.pageYOffset) {
  56.                 return window.pageYOffset
  57.             }
  58.             return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
  59.         }
  60.         function E(e) {
  61.             var t = m(e);
  62.             return t >= w && t <= b + w
  63.         }
  64.         function S() {
  65.             $("audio").remove();
  66.             var e = document.createElement("audio");
  67.             e.setAttribute("class", l);
  68.             e.src = i;
  69.             e.loop = false;
  70.             e.addEventListener("canplay",
  71.             function() {
  72.                 setTimeout(function() {
  73.                     x(k)
  74.                 },
  75.                 500);
  76.                 setTimeout(function() {
  77.                     N();
  78.                     p();
  79.                     for (var e = 0; e < O.length; e++) {
  80.                         T(O[e])
  81.                     }
  82.                 },
  83.                 5000)
  84.             },
  85.             true);
  86.             e.addEventListener("ended",
  87.             function() {
  88.                 N();
  89.                 h()
  90.             },
  91.             true);
  92.             e.innerHTML = " <p>如果你正在读这篇文章，那是因为你的浏览器不支持音频元素。我们建议你得到一个新的浏览器。</p> <p>";
  93.             document.body.appendChild(e);
  94.             e.play()
  95.         }
  96.         function x(e) {
  97.             e.className += " " + s + " " + o
  98.         }
  99.         function T(e) {
  100.             e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
  101.         }
  102.         function N() {
  103.             var e = document.getElementsByClassName(s);
  104.             var t = new RegExp("\\b" + s + "\\b");
  105.             for (var n = 0; n < e.length;) {
  106.                 e[n].className = e[n].className.replace(t, "")
  107.             }
  108.         }
  109.         var e = 30;
  110.         var t = 30;
  111.         var n = 350;
  112.         var r = 350;
  113.         var i = CrazyMusic[Math.floor(Math.random() * Number(CrazyMusic.length))];
  114.         var f = hicss;
  115.         var s = "mw-harlem_shake_me";
  116.         var o = "im_first";
  117.         var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
  118.         var a = "mw-strobe_light";
  119.         var l = "mw_added_css";
  120.         var b = g();
  121.         var w = y();
  122.         var C = document.getElementsByTagName("*");
  123.         var k = null;
  124.         for (var L = 0; L < C.length; L++) {
  125.             var A = C[L];
  126.             if (v(A)) {
  127.                 if (E(A)) {
  128.                     k = A;
  129.                     break
  130.                 }
  131.             }
  132.         }
  133.         if (A === null) {
  134.             return
  135.         }
  136.         c();
  137.         S();
  138.         var O = [];
  139.         for (var L = 0; L < C.length; L++) {
  140.             var A = C[L];
  141.             if (v(A)) {
  142.                 O.push(A)
  143.             }
  144.         }
  145.     })()
  146. };
  147. function stopCrazy() {
  148.     $("audio").remove();
  149.     $(".mw_added_css").remove()
  150. }

第三步 在页面底部引用hi.js

  1. <script type='text/javascript' src='/hi.js'></script>

第四步 将下面代码放到主题的footer.php中

  1. <script type="text/javascript">
  2. /* 定义 hi.css */
  3. var hicss="/hi.css"; 
  4. /* 定义歌曲数组 */
  5. var CrazyMusic=[
  6.     "http://www.ytmp3.cn/down/77158.mp3",
  7.     "http://www.ytmp3.cn/down/77167.mp3",
  8.     "http://www.ytmp3.cn/down/77020.mp3",
  9.     "http://www.ytmp3.cn/down/77161.mp3"    
  10. ];
  11.  
  12. /* 监听到 ESC 或鼠标双击动作，将停止所有效果 */
  13. function KeyMonitor() { 
  14.     if (event.keyCode == 27) {stopCrazy()}; 
  15.  } 
  16. $(document).bind("dblclick",stopCrazy);
  17. $(document).bind("onkeydown ",KeyMonitor);
  18. </script>

第五部 触发按钮

  1. <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