彩色tag云(非插件)

林继 WordPress 3,229 共写了544个字 (2010-12-14 21:58:59) 没有评论 打印 扫描二维码 百度已收录

看到tag云那里有些沉闷,就用JS做了个3D球形滚动的,结果在IE下占用资源太多,又不想用flash的方式,所以写了这个彩色标签云js,让tag看起来没那么沉闷。

我不太喜欢用WP的插件,特别是一些简单的东西,非要加上个插件,拖慢网页速度不说,有时更换皮肤还会引起冲突,而且自己写的代码才是最有针对性、相对最优化和最小巧的。

现在很多网站都使用了jquery框架,我做的TStyle皮肤也不例外,所以这段JS代码是在jquery的框架下写的。

演示请看本站的首页和tags页。

请看JS代码:

  1. <script type="text/javascript">
  2. function tagColor() {
  3. 	var colors = ["#0cf","#06f","#900","#990","#f36","#639","#60f","#0c0","#f90","#c66","#9b0","#f0f","#00f","#333"]; //预设你想使用到的色彩,把他们保存为一个数组colors,可以随意增加减少
  4. 	var tags = $("#side-tag-ctn a"); //标签选择器,id为side-tag-ctn的div的子标签a,保存为一个数组
  5. 	var tagCount = tags.length; //统计所有要改变的标签的数量
  6. 	for ( i=0; i<tagCount; i++ ) { //循环赋色开始
  7. 		n = Math.floor( Math.random() * colors.length ); //把上面的色彩作随机排序
  8.     		tags.eq(i).css({"color":colors[n]}); //赋予每个标签随机获取到的颜色
  9. 	}
  10. }
  11. tagColor();
  12. </script>

因为我的标签云所在div的id是ide-tag-ctn,所以第三行代码那里的选择器我就写了#side-tag-ctn a,不一定要写ID的选择器,也可以写类的选择器,比如.tags a。

把这段代码放到你想要显示彩色tag的页面就行了,注意要放在tag的div标签后面,这样才能读到这个div(如果放在前面,就要使用jquery的$(document).ready()方法,请自己去查资料)。

提示:你还可以把这段函数封装成一个传参的函数,这样在调用的时候call函数传参就行了,又或者直接封装成jquery的插件来调用,就不必要每页都放这么一大段代码。

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

< >