首页 » 建站技术 » WordPress » 浏览内容

彩色tag云(非插件)


2010-12-14 21:58:59 3,182 0 发表评论 字体: 作者:C.K.
标签: tagsWordPress备忘

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

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

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

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

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

请看JS代码:

<script type="text/javascript">
  • function tagColor() {
  •     var colors = ["#0cf","#06f","#900","#990","#f36","#639","#60f","#0c0","#f90","#c66","#9b0","#f0f","#00f","#333"]; //预设你想使用到的色彩,把他们保存为一个数组colors,可以随意增加减少
  •     var tags = $("#side-tag-ctn a"); //标签选择器,id为side-tag-ctn的div的子标签a,保存为一个数组
  •     var tagCount = tags.length; //统计所有要改变的标签的数量
  •     for ( i=0; i<tagCount; i++ ) { //循环赋色开始
  •         n = Math.floor( Math.random() * colors.length ); //把上面的色彩作随机排序
  •             tags.eq(i).css({"color":colors[n]}); //赋予每个标签随机获取到的颜色
  •     }
  • }
  • tagColor();
  • </script>
  • 因为我的标签云所在div的id是ide-tag-ctn,所以第三行代码那里的选择器我就写了#side-tag-ctn a,不一定要写ID的选择器,也可以写类的选择器,比如.tags a。

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

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

    网站统计 Statistics

    • 创建时间: 2005年1月3日 距今5064 天
    • 日志总数: 2461
    • 评论总数: 630
    • 标签总数: 654
    • 链接总数: 273
    • 最后更新: 2018-8-31 17:57:04
    • 您是本站第 14156791 位访客

    广告区 Guǎng Gào