蓝点网
给你感兴趣的内容

为网站添加High一下功能 附相关源代码下载

斐讯K3C零元购

High一下功能是蓝点网三年前添加的一个趣味性内容,不过在后来的版本更迭中丢失了。

这几天又有站长咨询这个功能,于是我们重新改进了代码并测试通过。

有兴趣的站长也可以为自己的网站添加这一功能,初级站长可以直接使用我们提供的资源即可。

对于有能力改进CSS样式表和JavaScript的站长,可以自行修改对应的代码来满足自己的需求。

本文分为完整的操作指南和懒人版,如果你懒得修改文件内容就直接跳转到结尾看懒人版。

Update:蓝点网下载服务器已全面启用HTTPS,因此懒人版也支持HTTPS版网站啦!

下载相关源代码:(打开并右键另存到本地即可)

1、http://dl.lancdn.com/landian/dev/high/src/bgm_2.mp3
2、http://dl.lancdn.com/landian/dev/high/src/high.css
3、http://dl.lancdn.com/landian/dev/high/src/high.js

文件功能说明:

1、back.mp3即播放的背景音乐,可以自定义任何音频格式内容,该文件在high.js中引入;

2、high.css是本功能的核心样式表,该文件在high.js中引入;

3、high.js是本功能的核心脚本,该文件需要在网站中引入;

HTTP版操作指南:(HTTP版理论上支持任何类型的站点)

1、首先逐条打开上述四个URL地址将对应的文件另存为到本地进行保存;

2、将high.mp3high.css上传至你的服务器或者是其他地址上进行调用;

3、以本教程为例,上述三个文件的上传地址为//dl.lancdn.com/landian/dev/high/src/目录;

4、打开high.js文件转到227行和237行(分别是音频调用地址和CSS调用地址);

5、将227行的地址修改为你自己MP3存储的地址,例如蓝点网调用的地址是:

//dl.lancdn.com/landian/dev/high/src/bgm_2.mp3

6、将237行的地址修改为你自己high.css存储的地址,例如蓝点网调用的地址是:

//dl.lancdn.com/landian/dev/high/src/high.css

7、在网站头部引入high.js文件后上传至网站服务器:

<script type="text/javascript" src="//dl.lancdn.com/landian/dev/high/src/high.js"></script>

8、在网站任意位置引入以下内容作为触发功能的按钮:

<button type="button" class="btn btn-link" onclick="hig();">High一下</button>

9、至此你的网站已经成功添加了High功能,如果无法使用的话请先检查每一个四个调用的文件是否可以正常打开,任何一个无法加载都会导致功能无法使用,其他问题请在评论中留言。

HTTPS版操作指南:

HTTPS版的话所有资源都必须支持HTTPS加载才行,所以上述四个资源文件也必须支持HTTPS访问。

以蓝点网为例:四个资源上传在www.landiannews.com/static/文件夹中,那么在high.js中引入地址时可以写成这样:

//www.landiannews.com/static/high.js

不要在调入地址前添加http:即可,这种方法也适用于同时支持HTTPHTTPS访问的站点;

懒人版操作指南:

如果你懒得动手改文件的话可以使用懒人版的方法,所有资源直接从蓝点网下载服务器调用。

直接在网站头部引入high.js上传至网站服务器:

<script type="text/javascript" src="//dl.lancdn.com/landian/dev/high/src/high.js"></script>

然后在网站任意位置添加触发按钮即可:

<button type="button" class="btn btn-link" onclick="hig();">High一下</button>

注意事项:

1、本方法支持HTTPS版的网站,因为蓝点网下载服务器已并未开通HTTPS访问;

2、若遇到蓝点网下载服务器处于下载高峰时,那么会影响该功能的反应时间,例如点击按钮后几秒才会播放;

3、一般来说上述资源的链接不会失效,但不排除哪一天下载服务器关闭,那么你的功能就无法使用了。

转载请注明蓝点网 » 为网站添加High一下功能 附相关源代码下载
分享到: 更多 (0)
请注意:按相关管理条例要求本站已关闭留言功能恢复时间待定。

评论 28

评论前必须登录!

 

  1. #9
    Google Chrome 56.0.2924.87 Windows 7 x64 Edition

    确实很嗨,不过对于大图片是不动的,怎么修改?

    惜时8个月前 (02-12)
  2. #8
    Google Chrome 45.0.2454.101 Windows 10 x64 Edition

    404

    81192_field11个月前 (11-28)
    • Google Chrome 56.0.2924.87 Windows 10 x64 Edition

      OK 这次恢复时间有点长 把蓝点网下载服务器也加HTTPS了 懒人版也支持HTTPS网站了

      • Google Chrome 50.0.2661.102 Windows 10 x64 Edition

        刚刚看邮箱蹦出个回复。。。。。。。

        81192_field9个月前 (02-08)
  3. #7
    Google Chrome 45.0.2454.101 Windows 7 x64 Edition

    404了 5555

    xianghua_we12个月前 (11-07)
  4. #6
    Google Chrome 54.0.2837.2 Android 5.1.1

    顶!!虽然看不太懂这些东西,但是开源代码很赞

    Wae1年前 (2016-09-04)
    • Google Chrome 52.0.2743.82 Windows 10 x64 Edition

      为何你的chrome版本这么高 在Android上还加入了beta计划?

      • Google Chrome 54.0.2837.2 Android 5.1.1

        我也不清楚,从google play store下载的,然后更新到了最新版,应该是beta

        Wae1年前 (2016-09-04)
  5. #5
    Google Chrome 53.0.2785.89 Windows 7 x64 Edition

    wordpress 主题中在哪里引入 js?function? header?

    1Q941年前 (2016-09-04)
  6. #4
    Safari 10.0 iPad iOS 10.0

    鸭子哥。。。公安备案是要去公安局么。。。和普通备案有什么区别

    gyz1年前 (2016-09-04)
    • Safari 9.0 iPhone iOS 9.3.3

      icp备案是工信部的 国内网站都要 公安备案是另一套备案系统 信息体交在公安系统 预计未来也会要求必须备

  7. #3
    Google Chrome 45.0.2454.101 Windows 7 x64 Edition

    IE内核的话,点一次High一下就开一个BGM,第二次开两个。。。但是页面并不high

    nan1年前 (2016-09-04)
  8. #2
    Google Chrome 52.0.2743.116 Windows 10 x64 Edition

    这个主题蛮不错的!!

    望星湖畔1年前 (2016-09-03)
    • Google Chrome 53.0.2785.89 Windows 10 x64 Edition

      你站为何总是打不开捏?搞的我链接都下了

      • Google Chrome 52.0.2743.116 Windows 10 x64 Edition

        哈哈!!这两天自己搞了vps,正在搬家,以后会好起来的~~

        望星湖畔1年前 (2016-09-04)
  9. #1
    Google Chrome 53.0.2785.89 Windows 10 x64 Edition

    鸭子哥这是。。。。。哈哈哈

    rigel1年前 (2016-09-03)