心大了,这个世界的烦恼就小了;心小了,这个世界的烦恼就大了;心无所住!

利用Jquery动态加载ZBLOG栏目背景音乐

17 12月
作者:妙清自牧|分类:未命名|标签:学习 摄影 生活 人生

    前两天突然想到给博客的“生活随笔”栏目及下面的文章加点背景音乐,于是就想着去到模板里面加段背景音乐的代码不就得了,后来一看才发现,zblog的所有的栏目模板都是一个通用的,也就是catalog.html这个文件,如果在这个模板里面加了背景音乐的代码,那不光是“生活随笔”这个栏目会有背景音乐,其它的栏目都会有,这就不是我想要的效果。

    有没有什么办法可以实现只给“生活随笔”这个栏目加上背景音乐呢?当然是有的,因为我已经实现了!下面就是方法:

思路:判断标题里面是不是有“生活随笔”这几个字,(因为生活随笔栏目及其下面的文章页面标题都会有“生活随笔”这几个字,而其他栏目基本不会出现),如果有就动态加载背景音乐代码,没有就不加。

代码实现

JavaScript Code复制内容到剪贴板
  1. $(document).ready(function(){   
  2.     var t=$('title').html();/*获取标题中的字符*/  
  3.     if(t.indexOf("随笔")>0){   
  4.         $('body').append('<embed src="/upload/bg.mp3" autostart="true" loop="true" hidden="true"></embed>');/*判断标题中是否包含随笔两个字,有的话,就加载背景音乐代码*/  
  5.     }   
  6. });  

 

以上代码是用到了Jquery,js,主要涉及到的有 .html()、.indexOf()、.append()这三个方法:
.html():从匹配的第一个元素中获取HTML内容。在一个 HTML 文档中, 可以使用 .html() 方法来获取任意一个元素的内容。
.indexOf():返回某个指定的字符串值在字符串中首次出现的位置,如果找到指定的字符串,则返回第一次出现的位置,如果要检索的字符串值没有出现,则该返回-1。
.append():将特定内容插入到匹配元素里面的最后面,作为它的最后一个子元素。

XML/HTML Code复制内容到剪贴板
  1. <embed src="/upload/bg.mp3" autostart="true" loop="true" hidden="true"></embed>  

 

这段代码就是背景音乐的代码。为什么不用bgsound呢?因为bgsound只有IE系列的支持,所以我用了<embed></embed>,里面有三个参数:autostart、loop、hidden,分别是否设置自动播放、是否循环、是否隐藏界面。

好了,现在可以点击去“生活随笔”栏目听听了,是不是有背景音乐了呢?或者你是不是也想给你的博客的某个栏目加一段美妙的背景音乐呢?复制代码,改标题名字,改路径,最后别忘引用Jquery库!

[Javascript面向对象编程]

浏览650 评论0
返回
目录
返回
首页
Javascript面向对象编程 [SEO优化] Z-blog分类栏目和静态日志隐匿优化

发表评论

欢迎你第一次访问网站! 您是本站第5425名访客 今日有0篇新文章

分享:

支付宝

微信