首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JS+CSS让网站嗨起来,博客要被玩坏了!

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

作者头像
张戈
发布于 2018-03-23 06:53:03
发布于 2018-03-23 06:53:03
1.1K00
代码可运行
举报
文章被收录于专栏:张戈的专栏张戈的专栏
运行总次数:0
代码可运行

最开始在陌小雨那就看到了这个功能,觉得挺好玩,但是也没想继续深入。昨天在无主题博客看到他分享了这个功能的代码之后,觉得可以试试。

用了之后,发现他改进之后的代码存在几个缺憾:

①、他加入了随机播放功能,但是多次点击启动,将出现多首歌曲叠加播放 BUG(嗨过头了); ②、这个功能一旦启用,就必须刷新页面来停止,否则得等到歌曲播放完成才会停止“颤抖”; ③、如果用了 CDN,那么 js 会托管到 CDN,新增或更改歌曲就变得非常麻烦,因为缓存刷新很蛋疼; ④、启动之后,高潮来得有点慢,15.5s 才会看到明显效果(强迫症)。

一、功能改进

我部署了这个功能之后,改进了一下:

①、加入移除机制,当第二次启动功能时,将移除上一次加载内容,从而避免了歌曲叠加播放的窘迫; ②、加入停止函数 stopCrazy(),只要执行这个函数就能停止效果,怎么发挥就看你的了; ③、将歌曲赋值数组从 js 里面分离出来,直接放到页面中,后续只要修改页面代码,就能即时生效; ④、我将 15.5s 的延迟改成 5s,让高潮效果提前,没办法现代人大部分喜欢快节奏。。。

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

二、功能部署

①、CSS 代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/*
* 提示:该行代码过长,系统自动注释不进行高亮。一键复制会移除系统注释 
* @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 文件的 http 路径,后面的 js 中需要填写。

②、主 JS 代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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)},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(){$("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)},500);setTimeout(function(){N();p();for(var e=0;e<O.length;e++){T(O[e])}},5000)},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=30;var t=30;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 的延迟,只需要在上述代码中搜索 5000,然后改回 15500 即可。

最新补充:发现很多朋友不知道引入 js 是干嘛,有的甚至完全忘记上面这个引入主要 js 的步骤,再次说明下,将上述 js 代码保存为 crazy.js,然后上传到主题根目录,最后在主题目录下的 header.php 或 footer.php 中添加如下代码即可:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script type='text/javascript' src='<?php echo get_template_directory_uri(); ?>/crazy.js'></script>

不是 WordPress 主题的,可以自行上传到网站任意目录,然后如上引入到网站页面当中即可,要注意下文件的路径。

③、页面 JS 代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script type="text/javascript">
/* 定义hi.css */
var hicss="此处请填写hi.css的地址,比如http://zhangge.net/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,不启动功能时,并不会加载文件,请放心添加!

④、触发按钮

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<a title="亲,点我放松一下吧~!(单击启动,双击或ESC停止)" id="hig" href="javascript:void(0);" onclick="hig();" ondblclick="location.reload(true);">点我嗨一下</a>

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

三、文件下载

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

下载地址

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2014年12月04日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
【AWS系列】镭速RaySync VS FTP (4)- AWS爱尔兰到腾讯云广州
Windows Server: https://www.raysync.cn/support_for_windows.html
云语科技
2018/03/07
1.1K0
【AWS系列】镭速RaySync VS FTP (4)- AWS爱尔兰到腾讯云广州
跨境数据传输是日常业务中经常且至关重要的组成部分
跨境数据传输是日常业务中经常且至关重要的组成部分。在过去的20年中,由于全球通信网络和业务流程的发展,全球数据流的模式已迅速发展。随着数据从数据中心移到数据中心和/或跨边界移动,安全漏洞已成为切实的风险。有可能违反国家和国际数据传输法规和隐私法。随着越来越多的国家实施规范跨境数据传输的隐私法律,这些风险变得越来越普遍。这些法律通常禁止跨境转移,除非满足某些条件或对转移公司施加监管义务。
镭速
2023/03/02
5740
什么是文件传输协议,文件传输协议又是怎么工作的
文件传输协议FTP是一种仍在使用的协议,在上载和下载文件时仍然比较流行,通常是那些太大的文件,需要花费很长时间才能通过常规电子邮件程序作为附件下载进行传输。
镭速
2023/04/11
1.2K0
什么是点对点传输?什么是点对多传输
点对点技术(peer-to-peer, 简称P2P)又称对等互联网络技术,是一种网络新技术,依赖网络中参与者的计算能力和带宽,而不是把依赖都聚集在较少的几台服务器上。P2P网络通常用于通过Ad Hoc连接来连接节点。这类网络可以用于多种用途,各种文件共享软件已经得到了广泛的使用。P2P技术也被使用在类似VoIP等实时媒体业务的数据通信中。
镭速
2023/05/08
9750
镭速FTP:一个易用、快速的文件传输软件
镭速FTP由我所在的开发团队研发,经过13个月的努力打磨,2018年1月20日正式发布第一个版本。
云语科技
2018/03/22
2.6K0
为什么不建议在云主机上使用ftp的2个原因
ftp文件传输服务历史源远流长,第一版FTP RFC协议制定于1971年,经过多年的完善、修补,很多80年代出生的IT人的第一次文件传输经历就是通过FTP完成的,笔者同样如此。
云语科技
2018/02/26
5.6K0
镭速RaySync VS FTP 系列(1) - 腾讯云美西到腾讯云广州
更多测试信息: 腾讯云海外数据中心到腾讯云广州-文件传输对比评测集合
云语科技
2018/02/07
4.1K0
镭速RaySync VS FTP 系列(1) - 腾讯云美西到腾讯云广州
关于文件传输协议,你不知道的事
文件传输协议(FTP)是一种网络协议,用于通过传输控制协议/互联网协议 ( TCP/IP ) 连接在计算机之间传输文件。在 TCP/IP 套件中,文件传输协议被视为应用层协议。
镭速
2023/03/16
8690
哪里有免费大文件传输平台?通过这4个网站免费来进行大文件传输
使用电子邮件发送大文件时,可能会遇到大小文件传输的限制。这四个免费大文件传输网站让大文件传输变得轻而易举。有许多大文件传输网站,但是通常您必须经过一些步骤才能使用它们,例如创建帐户,验证电子邮件地址或进行倒计时。
镭速
2023/04/06
4.2K0
跨国跨区域远程文件传输有什么好处?
随着移动设备的普及和全球化,许多国内企业已经建立了自己的海外分支机构或与其他国家和企业建立合作关系。但是就目前而言,市场上大多数公司的文件管理和存储解决方案都是针对我们自己的业务和设计的,没有英文界面,没有海外服务器,无法满足跨国跨区域跨区域业务之间文件传输的需求。跨区域跨境传输的文件传输过程面临着不安全和传输速度过快的问题。
镭速
2023/03/23
1.5K0
常见的ftp文件传输工具有哪些?适合WordPress用户的最佳ftp文件传输工具
ftp文件传输工具允许将计算机上的本地文件连接到在线服务器。例如,可能正在创建一个 WordPress 站点。在这种情况下,可以在计算机上构建一个网站,然后最终将所有文件移动到服务器并启动网站以供全世界查看。
镭速
2023/03/13
2.3K0
镭速RaySync VS FTP 系列(9) - 腾讯云英国到腾讯云广州
更多测试信息: 腾讯云海外数据中心到腾讯云广州-文件传输对比评测集合
云语科技
2018/02/07
1.7K0
镭速RaySync VS FTP 系列(9) - 腾讯云英国到腾讯云广州
深挖P2P传输技术,升级与创新并举
你用过P2P传输吗?现在的P2P传输可以说是继局域网、ftp、http之后最广泛使用的文件分享和传播途径,被众多企业运用在工作中。
全栈程序员站长
2022/09/13
1.9K0
深挖P2P传输技术,升级与创新并举
如何实现文件高速传输,推荐镭速高速文件传输解决方案
随着互联网的发展,文件传输越来越频繁,如何实现文件高速传输已经越来越成为企业发展过程中需要解决的问题,
镭速
2023/02/23
6140
基金行业,镭速文件传输系统方案
随着经济的发展,基金行业的数字化转型步伐越来越快。基金机构正全力应对迅速增长的数据,并尝试确定如何以最佳方式存储、保护和分析数据。基金机构面临新的竞争对手和不断变化的客户期望,并且还需要简化运营,降低成本,这会推动他们转型进入数字化移动世界。
镭速
2023/02/21
3850
镭速RaySync VS FTP 系列(10) - 腾讯云达拉斯到腾讯云广州
更多测试信息: 腾讯云海外数据中心到腾讯云广州-文件传输对比评测集合
云语科技
2018/02/07
4.4K0
镭速RaySync VS FTP 系列(10) - 腾讯云达拉斯到腾讯云广州
启用Windows防火墙后,FTP传输非常慢
我们有一个计划任务,该任务使用Windows命令行FTP程序在两个Windows服务器之间传输大文件(〜130 MB)。速度很慢(大约需要30分钟),有时会在传输完成之前终止。服务器是2003年(发送)和2008年(接收)。
镭速
2023/06/01
1K0
大件传输的9种方法
不知道你有没有试过用电子邮件进行大文件传输,由于文件大小的限制,往往会发送失败。同时,一些文件共享服务对传输的文件有大小限制,使得你无法与朋友分享电影片段或向客户展示你的工作样本。还有一些要求你注册一个账户,这可能是一个麻烦。
镭速
2023/02/15
1.5K0
FTP VS镭速传输,小文件传输技术内有乾坤
小文件传输,一般文件传输软件都可以解决的问题。大家最早使用的小文件传输软件,非开源软件FTP莫属了。但对FTP,也有很多企业在与镭速进行技术沟通时,都提及到,它的传输是真的慢!
镭速
2023/03/09
1.3K0
镭速RaySync VS FTP 系列(5) - 腾讯云日本到腾讯云广州
更多测试信息: 腾讯云海外数据中心到腾讯云广州-文件传输对比评测集合
云语科技
2018/02/07
3.7K0
镭速RaySync VS FTP 系列(5) - 腾讯云日本到腾讯云广州
推荐阅读
相关推荐
【AWS系列】镭速RaySync VS FTP (4)- AWS爱尔兰到腾讯云广州
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档