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

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

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

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

②、这个功能一旦启用,就必须刷新页面来停止,否则得等到歌曲播放完成才会停止“颤抖”;

③、如果用了 CDN,那么 js 会托管到 CDN,新增或更改歌曲就变得非常麻烦,因为缓存刷新很蛋疼;

④、启动之后,高潮来得有点慢,15.5s 才会看到明显效果(强迫症)。

一、功能改进

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

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

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

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

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

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

二、功能部署

①、CSS 代码

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

②、主 JS 代码:

将以上 js 代码保存为 crazy.js 或直接添加到网站的其他全局 js 文件中均可。如果想改回 15.5s 的延迟,只需要在上述代码中搜索 5000,然后改回 15500 即可。

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

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

③、页面 JS 代码

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

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

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

④、触发按钮

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

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

三、文件下载

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

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

文件下载

评论已关闭!