利用Jquery动态加载ZBLOG栏目背景音乐
前两天突然想到给博客的“生活随笔”栏目及下面的文章加点背景音乐,于是就想着去到模板里面加段背景音乐的代码不就得了,后来一看才发现,zblog的所有的栏目模板都是一个通用的,也就是catalog.html这个文件,如果在这个模板里面加了背景音乐的代码,那不光是“生活随笔”这个栏目会有背景音乐,其它的栏目都会有,这就不是我想要的效果。
有没有什么办法可以实现只给“生活随笔”这个栏目加上背景音乐呢?当然是有的,因为我已经实现了!下面就是方法:
思路:判断标题里面是不是有“生活随笔”这几个字,(因为生活随笔栏目及其下面的文章页面标题都会有“生活随笔”这几个字,而其他栏目基本不会出现),如果有就动态加载背景音乐代码,没有就不加。
代码实现:
- $(document).ready(function(){
- var t=$('title').html();/*获取标题中的字符*/
- if(t.indexOf("随笔")>0){
- $('body').append('<embed src="/upload/bg.mp3" autostart="true" loop="true" hidden="true"></embed>');/*判断标题中是否包含随笔两个字,有的话,就加载背景音乐代码*/
- }
- });
以上代码是用到了Jquery,js,主要涉及到的有 .html()、.indexOf()、.append()这三个方法:
.html():从匹配的第一个元素中获取HTML内容。在一个 HTML 文档中, 可以使用 .html() 方法来获取任意一个元素的内容。
.indexOf():返回某个指定的字符串值在字符串中首次出现的位置,如果找到指定的字符串,则返回第一次出现的位置,如果要检索的字符串值没有出现,则该返回-1。
.append():将特定内容插入到匹配元素里面的最后面,作为它的最后一个子元素。
- <embed src="/upload/bg.mp3" autostart="true" loop="true" hidden="true"></embed>
这段代码就是背景音乐的代码。为什么不用bgsound呢?因为bgsound只有IE系列的支持,所以我用了<embed></embed>,里面有三个参数:autostart、loop、hidden,分别是否设置自动播放、是否循环、是否隐藏界面。
好了,现在可以点击去“生活随笔”栏目听听了,是不是有背景音乐了呢?或者你是不是也想给你的博客的某个栏目加一段美妙的背景音乐呢?复制代码,改标题名字,改路径,最后别忘引用Jquery库!
目录 返回
首页