纯jquery代码实现标彩色签云(原创)

不过标签云字体默认情况尺寸不同,但色彩一致,看起来相当杂乱,不美观,虽然有 Simple Tags 等插件可以为标签上色,但是直接修改来实现会更好。毛主席教导我们,自动手丰衣足食,发扬光荣革命传统自己动手。

1.首先打开你的wordpress主题的footer.php文件

插入如下代码

首先引用新浪的jquery类库

<script type=”text/javascript” src=”http://lib.sinaapp.com/js/jquery/1.7/jquery.min.js“></script>

2.在引用的jquery类库后边插入我们的关键代码!

<script type=”text/javascript”>
<!–

//标签云自动彩色欢迎访问我的bloghttp://www.onbno.com

var config = {//定义颜色数组
‘selector’: ‘*’,
‘color’: [‘LightPink’, ‘orange’, ‘Crimson’, ‘PaleVioletRed’, ‘red’,’blue’,’SlateBlue’, ‘SkyBlue’, ‘PaleGreen’, ‘GreenYellow’, ‘OliveDrab’, ‘DarkKhaki’, ‘SaddleBrown’, ‘Olive’],
‘shuffle’: 1,

‘singcolor’: 0
};
for (i = 0, j = 1; j < config.color.length; i++, j++) {
rand = j + parseInt(Math.random() * (config.color.length – j));
temp = config.color[rand];
config.color[rand] = config.color[i];
config.color[i] = temp;
}
$(“#tag_cloud-2 a”).each(function(i) {//tag_cloud-2是标签云的id
$(this).css(‘color’, config.color[i % config.color.length]); //超出颜色数组长度自动归0
$(this).css(‘border-bottom’, ‘1px solid ‘);//设置边框
$(this).css(‘border-color’, config.color[i % config.color.i]);//设置边框颜色
});
//标签云自动彩色

–>
</script>

具体效果请看本站的彩色标签云

 » 本站地址:http://www.gomoth.com

标签: ,