为网站添加High一下功能 附相关源代码下载
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.mp3
、high.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访问。
以蓝点网为例:四个资源上传在landian.vip/static/
文件夹中,那么在high.js
中引入地址时可以写成这样:
//landian.vip/static/high.js
不要在调入地址前添加http:
即可,这种方法也适用于同时支持HTTP
和HTTPS
访问的站点;
懒人版操作指南:
如果你懒得动手改文件的话可以使用懒人版的方法,所有资源直接从蓝点网下载服务器调用。
直接在网站头部引入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、一般来说上述资源的链接不会失效,但不排除哪一天下载服务器关闭,那么你的功能就无法使用了。