WordPress教程 · WPtech

让WordPress网站摇摆起来!

•̀.̫•́✧ · 2月22日 · 2020年本文9091字 · 阅读23分钟224

功能描述

①、加入移除机制,当第二次启动功能时,将移除上一次加载内容,从而避免了歌曲叠加播放的窘迫;

②、加入停止函数stopCrazy(),只要执行这个函数就能停止效果,怎么发挥就看你的了;

③、将歌曲赋值数组从js里面分离出来,直接放到页面中,后续只要修改页面代码,就能即时生效;

④、我将15.5s的延迟改成5s,让高潮效果提前,没办法现代人大部分喜欢快节奏。。。

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}

以上css代码保存为hi.css上传到网站即可,然后记住这个css文件的路径,后面的js中需要填写。

JS代码

内容查看此隐藏内容查看价格1立即支付

i. 将第一步中的得到hi.css地址填写到代码中;

ii. 将你喜欢的歌曲上传到网站或七牛空间,然后将歌曲的http地址替换上述代码的【歌曲地址】即可。

Ps:将这个JS代码添加到网站任意位置均可,比如footer或head,不启动功能时,并不会加载文件,请放心添加!

触发按钮

部署完疯癫功能之后,咱们还需要添加一个启动按钮,启动代码示例如下:

内容查看此隐藏内容查看价格1立即支付
<a title="亲,点我放松一下吧~!(单击启动,双击或ESC停止)" id="hig" href="javascript:void(0);" rel="nofollow noopener"  onclick="hig();" ondblclick="location.reload(true);">点我嗨一下</a>
内容查看此隐藏内容查看价格1立即支付

将以上代码添加到网站的合适位置即可,样式可以进一步DIY一下,比如张戈博客是弄了一个图片启动按钮,放到了网站右下角的滚动条的右侧。

好了,这个功能就分享到这,顺便偷偷说一声,这个功能应该适用任何建站程序,符合html协议即可,一般人我还不告诉他!

0 条回应