JS+CSS让网站嗨起来,博客要被玩坏了! | 张戈博客

  • 时间:
  • 浏览:50
  • 来源:可可资源网_提供ACE资源网技术_爱Q活动网资讯

最刚开始在陌小雨那看得人得人了你你这些功能,其实 挺好玩,若果也没想继续深入。昨天在无主题博客看得人他分享了你你这些功能的代码完后 ,其实 都里能试试。

用了完后 ,发现他改进完后 的代码存在好多个缺憾:

①、他加入了随机播放功能,若果多次点击启动,将出现多首歌曲叠加播放BUG(嗨过头了);

②、你你这些功能一旦启用,就都要刷新页面来停止,若果得等到歌曲播放完成才会停止“颤抖”;

③、将会用了CDN,这麼js会托管到CDN,新增或更改歌曲就变得非常麻烦,将会缓存刷新很蛋疼;

④、启动完后 ,高潮来得一阵一阵慢,15.5s才会看得人明显效果(强迫症)。

一、功能改进

我部署了你你这些功能完后 ,改进了一下:

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

②、加入停止函数stopCrazy(),若果执行你你这些函数就能停止效果,为什么会么会在么在发挥看得人你的了;

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

④、我将15.5s的延迟改成5s,让高潮效果提前,这麼现代人大次要喜欢快节奏。。。

完后 无主题博主小武也说了,都里能监听整个页面的双击动作来停止效果,提议不错。我考虑将停止函数绑定到鼠标双击、键盘ESC中间,下面刚开始DIY!

二、功能部署

①、CSS代码

@charset "utf-8";body{-webkit-backface-visibility:hidden}.mw-strobe_light{position:fixed;width:50%;height:50%;top:0;left:0;z-index:5000;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%,50%{-webkit-transform:translateX(0)}10%,50%,50%,70%,90%{-webkit-transform:translateX(-10px)}20%,40%,50%,50%{-webkit-transform:translateX(10px)}}@-moz-keyframes shake{0%,50%{-moz-transform:translateX(0)}10%,50%,50%,70%,90%{-moz-transform:translateX(-10px)}20%,40%,50%,50%{-moz-transform:translateX(10px)}}@-o-keyframes shake{0%,50%{-o-transform:translateX(0)}10%,50%,50%,70%,90%{-o-transform:translateX(-10px)}20%,40%,50%,50%{-o-transform:translateX(10px)}}@keyframes shake{0%,50%{transform:translateX(0)}10%,50%,50%,70%,90%{transform:translateX(-10px)}20%,40%,50%,50%{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)}50%{-webkit-transform:translateX(12%) rotate(3deg)}45%{-webkit-transform:translateX(-9%) rotate(-2deg)}50%{-webkit-transform:translateX(6%) rotate(2deg)}75%{-webkit-transform:translateX(-3%) rotate(-1deg)}50%{-webkit-transform:translateX(0%)}}@-moz-keyframes wobble{0%{-moz-transform:translateX(0%)}15%{-moz-transform:translateX(-15%) rotate(-5deg)}50%{-moz-transform:translateX(12%) rotate(3deg)}45%{-moz-transform:translateX(-9%) rotate(-3deg)}50%{-moz-transform:translateX(6%) rotate(2deg)}75%{-moz-transform:translateX(-3%) rotate(-1deg)}50%{-moz-transform:translateX(0%)}}@-o-keyframes wobble{0%{-o-transform:translateX(0%)}15%{-o-transform:translateX(-15%) rotate(-5deg)}50%{-o-transform:translateX(12%) rotate(3deg)}45%{-o-transform:translateX(-9%) rotate(-3deg)}50%{-o-transform:translateX(6%) rotate(2deg)}75%{-o-transform:translateX(-3%) rotate(-1deg)}50%{-o-transform:translateX(0%)}}@keyframes wobble{0%{transform:translateX(0%)}15%{transform:translateX(-15%) rotate(-5deg)}50%{transform:translateX(12%) rotate(3deg)}45%{transform:translateX(-9%) rotate(-3deg)}50%{transform:translateX(6%) rotate(2deg)}75%{transform:translateX(-3%) rotate(-1deg)}50%{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)}50%{-webkit-transform:scale(1)}}@-moz-keyframes pulse{0%{-moz-transform:scale(1)}50%{-moz-transform:scale(1.1)}50%{-moz-transform:scale(1)}}@-o-keyframes pulse{0%{-o-transform:scale(1)}50%{-o-transform:scale(1.1)}50%{-o-transform:scale(1)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}50%{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)}50%{-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)}50%{-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)}50%{-o-transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}50%{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文件的http路径,中间的js中都要填写。

②、主JS代码:

function hig(){(function(){function c(){ $(".mw_added_css").remove();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)},50)}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(){$("audio").remove();var e=document.createElement("audio");e.setAttribute("class",l);e.src=i;e.loop=false;e.addEventListener("canplay",function(){setTimeout(function(){x(k)},50);setTimeout(function(){N();p();for(var e=0;e<O.length;e++){T(O[e])}},500)},true);e.addEventListener("ended",function(){N();h()},true);e.innerHTML=" <p>将会你正在读这篇文章,那是将会你的浏览器不支持音频元素。我们我们我们我们

建议你得到有另一个



新的浏览器。</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=50;var t=50;var n=350;var r=350;var i=CrazyMusic[Math.floor(Math.random()*Number(CrazyMusic.length))];var f=hicss;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 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){return}c();S();var O=[];for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){O.push(A)}}})()};function stopCrazy(){ $("audio").remove();$(".mw_added_css").remove()}

将以上js代码保存为crazy.js或直接添加到网站的有些全局js文件中均可。将会想改回15.5s的延迟,只都要在上述代码中搜索500,若果改回1550即可。

最新补充:发现就说 我们我们我们我们 我想知道引入js是干嘛,有的甚至详细忘记中间你你这些引入主要js的步骤,再次说明下,将上述js代码保存为crazy.js,若果上传到主题根目录,最后在主题目录下的 header.php 或 footer.php 中添加如下代码即可:

<script type='text/javascript' src='<?php echo get_template_directory_uri(); ?>/crazy.js'></script>

就有WordPress主题的,都里能自行上传到网站任意目录,若果如上引入到网站页面当中即可,要注意下文件的路径。

③、页面JS代码

<script type="text/javascript">
/* 定义hi.css */
var hicss="此处请填写hi.css的地址,比如https://zhang.ge/hi.css";

/* 定义歌曲数组 */
var CrazyMusic=[
    "歌曲地址一",
    "歌曲地址二",
    "歌曲地址三",
    "歌曲地址四"
    /* 更多歌曲,请按照如上格式添加,英文逗号隔开,添加完后

记得删除中文占位,比如只添加了有另一个



歌曲地址,这麼有些【歌曲地址二、三、四、。。。】和多余逗号都删除掉!!!*/
];

/* 监听到ESC或鼠标双击动作,将停止所有效果 */
function KeyMonitor() { 
    if (event.keyCode == 27) {stopCrazy()}; 
 } 
$(document).bind("dblclick",stopCrazy);
$(document).bind("onkeydown ",KeyMonitor);
</script>

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

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

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

④、触发按钮

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

<a title="亲,点我放松一下吧~!(单击启动,双击或ESC停止)" id="hig" href="javascript:void(0);" onclick="hig();" ondblclick="location.reload(true);">点我嗨一下</a>

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

三、文件下载

为了方便部署,张戈特意打包了所有代码和文件,不过要记得修改代码中的CSS和歌曲地址哦!

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