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协议即可,一般人我还不告诉他!

文件下载

无限续期,永久免费科学上网服务,你值得拥有!

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

刷新评论

目前评论:52   其中:访客  34   博主  18

  1. 舍力博客 3 来自天朝的朋友 搜狗浏览器 Windows XP 山西省晋中市 联通

    貌似第一个签到!

    • 小武 6 来自天朝的朋友 谷歌浏览器 Windows 8.1 辽宁省大连市 电信

      晚一步. . 下次努力 :grin:

      • 梦想网络 5 来自天朝的朋友 火狐浏览器 Windows 8.1 四川省攀枝花市 电信

        你们都晚了,我才是第一个,哈哈哈哈

  2. 小武 6 来自天朝的朋友 谷歌浏览器 Windows 8.1 辽宁省大连市 电信

    必须来坐个沙发. . :oops:

  3. 梦想网络 5 来自天朝的朋友 火狐浏览器 Windows 8.1 四川省攀枝花市 电信

    就是因为你说的那几点原因,我才没有加那个功能,现在解决了,立马加上,哈哈哈

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      貌似我是问题终结者。 :cool:

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      刚刚JS代码中有个变量定义错了:应该是var f=hicss;手误写成了var f=htcss; 自己改下

  4. PHP二次开发 6 来自天朝的朋友 火狐浏览器 Windows 8 山东省济南市 联通

    Σ( ° △ °|||)︴,好吧!

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      :lol: 无语了吧

  5. 陌小雨 5 来自天朝的朋友 火狐浏览器 Windows 8.1 广东省珠海市 电信

    哈哈,这就是分享的力量呀!

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      感谢分享~

  6. 香港虚拟主机 2 来自天朝的朋友 火狐浏览器 Windows 7 重庆市 电信

    能让网站更生动,也能让读者有个好的视觉享受!

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      没事放松一下~

  7. 最新hosts 5 来自天朝的朋友 搜狗浏览器 Windows 7 湖北省武汉市 电信

    用的虾米插件实现,空间不够大,又怕外链不稳定

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      免费的七牛你不用?

      • Google上不去真蛋疼 5 来自天朝的朋友 搜狗浏览器 Windows 7 北京市 北京电信互联网数据中心

        现在七牛只做图床,别的不敢用,百度太笨了,我也不灵光。

  8. 极品飞鸽 5 来自天朝的朋友 谷歌浏览器 Windows 7 四川省成都市 电信

    这么玩也太high了嘛,还是简单点好

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      萝卜白菜,各有所爱,多折腾多学习。

  9. 皇都网络 0 来自天朝的朋友 火狐浏览器 Windows 7 广东省广州市 电信

    赞 这个类似于css压缩?

  10. 瑾瑜 4 来自天朝的朋友 火狐浏览器5.0 Windows 8.1 安徽省合肥市 中国科学技术大学

    哈哈,这个有点逗,不过停止后依然有个别内容在抖动啊。

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      没有吧?不过双击之后,页面会乡下滚动~

      • 瑾瑜 4 来自天朝的朋友 火狐浏览器5.0 Windows 8.1 安徽省合肥市 中国科学技术大学

        win8.1 IE11,不会向下滚,但是有个别抖动停不下来,chrome可以停,但滚动。

        • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

          看来是兼容性问题,先不管了~

  11. 必分享 3 来自天朝的朋友 谷歌浏览器 Windows 7 广东省佛山市 电信

    不错,是个好东西。

  12. 黑色网魂 1 来自天朝的朋友 QQ浏览器 Windows 8 宁夏银川市 电信

    真好玩,可惜我不懂代码,弄不到自己博客去

  13. 同盟源 5 来自天朝的朋友 谷歌浏览器 Windows 7 安徽省芜湖市 电信

    厉害厉害

  14. 第6团队 0 来自天朝的朋友 谷歌浏览器 Windows 7 辽宁省铁岭市 联通

    discuz论坛用不了

  15. 北京SEO 4 来自天朝的朋友 谷歌浏览器 Windows 7 天津市 联通

    已经移植成功,感谢分享!

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      貌似压缩报错了。自己检查吧~

  16. 七支剑 4 来自天朝的朋友 火狐浏览器 Windows 7 江苏省苏州市 电信

    找到这东西了 我也试一下去

  17. 挖资源部落 1 来自天朝的朋友 火狐浏览器 Windows 7 广东省东莞市 电信

    博主的东西就是不错!收藏了!

  18. 麦购穿衣打扮 1 来自天朝的朋友 谷歌浏览器 Windows 7 广东省佛山市三水区 电信

    哥们,布好了,点击 嗨一下 没反应呢,能1解答下吗?www.mygo123.com 网站底部

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      没有加载js。
      注意文章中:”将以上js代码保存为crazy.js或直接添加到网站的其他全局js文件中均可。“

      • 麦购穿衣打扮 1 来自天朝的朋友 谷歌浏览器 Windows 7 广东省佛山市三水区 电信

        这一步没漏啊,我把它存为crazy.js,添加到主题的/scripts/目录没用,直接添加到主题的jquery.js、jquery.jplayer.min.js、html5.js这些中还是没用。是不是不适用所有的主题呢?

        • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

          你会不会玩?保存为crazy.js,你得引入到网站当中。实在不行你就装我开发的插件:http://zhangge.net/4718.html

          • 涂涂小窝 2 来自天朝的朋友 火狐浏览器 Windows 8.1 广东省深圳市 铁通

            会不会玩,人家也是虚心请教,我测试了,反复检查了代码,如上代码确实不成功。部分步骤与方法有所遗漏,非插件模式。

            • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

              反复检查?你网站主要js都没引入吧?http://www.tutuxiaowo.com/css/hi.css这个地址也404,真不知道是怎么看文章的。
              跟上面楼主一样,不会折腾硬要用代码部署,怎么引入js也不清楚,为什么不考虑用插件呢?

  19. 七支剑 4 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省苏州市 电信

    $(document).bind(“dblclick”,stopCrazy);
    这行 ReferenceError: stopCrazy is not defined 是什么原因

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

      主要JS没有载入,缺少stopCrazy函数

  20. 奇营销强子 2 来自天朝的朋友 Safari浏览器 Mac OS X 10_10_4 湖北省武汉市 电信

    这个功能看着不错,回头整到我网站试试看,随你便问下张哥,底部这个随机推荐浮动栏怎么弄得,吧嗨起来放一起还是挺好的。

    • 张戈 [博主] 来自天朝的朋友 Safari浏览器  Android 4.4.4 M463C Build/KTU84P 广东省深圳市 联通

      可装插件:http://zhangge.net/4718.html

  21. 美容护肤小窍门 3 来自天朝的朋友 谷歌浏览器 Windows 7 湖南省长沙市 电信

    为什么ESC关不了 双击可以

  22. 晓庄 3 来自天朝的朋友 谷歌浏览器 Windows 8.1 广东省深圳市 电信

    张戈大大,除了引入crazy.js以后,还需要引入其他js么?我在header引入了,也没404。
    但是会提示$(document).bind(“dblclick”,stopCrazy);
    这行报错ReferenceError: stopCrazy is not defined。报错的意思是没有stopCrazy 函数,但是我在此之前已经引入了crazy.js了啊。

    • 晓庄 3 来自天朝的朋友 谷歌浏览器 Windows 8.1 广东省深圳市 电信

      好了,弄好了。最后还是引入了个jquery.min.js才行。

      • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

        。。文章没说清楚
        代码中有 $()的JS都是要Jquery支持的,不过一般主题每个页面都应该引入了JQ才对。

        • 晓庄 3 来自天朝的朋友 谷歌浏览器 Windows 8.1 广东省深圳市 电信

          嗯,我这主题可能被改了,这JQ还是我自己丢进去的。
          还有啊,因文章模板问题啊,有些模板是不会嗨,能说下这嗨的运行原理嘛。
          我这JS弱爆了,改半天没改成功,也看得不是很懂。

          • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 联通

            我哪知道什么原理,我只是互联网的搬运工,二次修改尚可。

            • 晓庄 3 来自天朝的朋友 谷歌浏览器 Windows 8.1 广东省深圳市 电信

              嗯哼,没事了。 :mrgreen: 已经改好了。
              也谢谢张戈大大~ :smile:

  23. 尘埃 1 来自天朝的朋友 谷歌浏览器 Windows XP 新疆乌鲁木齐市 电信

    :sad: 哎!不知道怎么搞的,我按照你的方法加到网站程序中,刚开始没有反应,后来我改了那个CSS开头的字符集为gb2312后又生成页面就好了,很酷炫,可惜当我双击停止后,又修改了一下页面代码位置之后就再也没有反映了,这个功能我非常喜欢,麻烦你能不能帮我看看是什么原因吗?我的网站正在备案,所以设置了访问权限,你可以输入帐户名admin密码admin123进去帮我看看好吗?万分感谢! :smile:

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Mac OS X 10_11_3 广东省深圳市 电信

      可以试试插件版本:https://zhangge.net/4718.html

      • 羚羊博客 1 来自天朝的朋友 谷歌浏览器 Windows 7 河北省石家庄市 电信

        谢谢张博主,你的插件太棒了,一步到位,让我这个Begin用户体验到了你的技术。大二学生党,我是一个迷茫的大学生

  24. 久久好鞋 0 来自天朝的朋友 谷歌浏览器 Windows 7 福建省莆田市 电信

    :evil: 这个东西也太6了吧!

加载中,请稍候...