样式设计代码：
<style type="text/css" >
body{
text-align:center;
font-size:12px;
}
.tagCloud{
;
text-align:left;
margin:30px auto;
}
.tagCloud a{
text-decoration:none;
padding:3px;
}
.tagCloud a:hover{
background:#69f;
color:#fff;
}
.color0{
color:#2F5FC2;
}
.color1{
color:#AC1BF2;
}
.color2{
color:#9E6FC5;
}
.color3{
color:#FBA426;
}
.color4{
color:#2739CF;
}
.color5{
color:#C8A453;
}
.color6{
color:#AB2846;
}
.weight0{
font-weight:100;
}
.weight1{
font-weight:300;
}
.weight2{
font-weight:500;
}
.weight3{
font-weight:700;
}
.weight4{
font-weight:900;
}
.weight5{
font-weight:bold;
}
.weight6{
font-weight:bolder;
}
.size0{
font-size:12px;
}
.size1{
font-size:14px;
}
.size2{
font-size:16px;
}
.size3{
font-size:18px;
}
.size4{
font-size:20px;
}
.size5{
font-size:22px;
}
.size6{
font-size:24px;
}
</style>
JS代码设计：
<script language="javascript" type="text/javascript">
function setTagCloudStyle(){
var colors = new Array("color0","color1","color2","color3","color4","color5","color6"); //定义不同颜色样式,这个大家可以自己增加数组中的值以增加更丰富的效果,次数组提供7种颜色,
//但是要注意这里增加了样式要注意不要忘记了增加上边css中的样式,否则没有效果.
var sizes = new Array("size0","size1","size2","size3","size4","size5","size6"); //定义不同字体样式,这个大家可以自己增加数组中的值以增加更丰富的效果,次数组提供7种字体大小,
//但是要注意这里增加了样式要注意不要忘记了增加上边css中的样式,否则没有效果.
var weights = new Array("weight0","weight1","weight2","weight3","weight4","weight5","weight6"); //定义不同字体样式,这个大家可以自己增加数组中的值以增加更丰富的效果,次数组提供7种字体大小,
//但是要注意这里增加了样式要注意不要忘记了增加上边css中的样式,否则没有效果.
//其实这里大家还可以自己增加比如字体样式,宋体、楷体、......等,可以自己修改
var colorsLen = colors.length;//获取颜色样式个数
var sizesLen = sizes.length;//获取字体大小样式个数
var weightsLen = weights.length;//获取字体粗细样式个数
var tagCloud = document.getElementById("tagCloud");
var tagLinks = tagCloud.getElementsByTagName("a");
var tagLinksLen = tagLinks.length;
for(i = 0 ; i < tagLinksLen ; i++){
tagLinks[i].className = colors[Math.floor(colorsLen*Math.random())] + " " + sizes[Math.floor(sizesLen*Math.random())]+ " " + weights[Math.floor(weightsLen*Math.random())];
//随机设置每个<a>标签的样式,以实现不同效果.
}
}
if(document.addEventListener)
{
window.addEventListener('load',setTagCloudStyle,false);
}
else
{
window.attachEvent('onload',setTagCloudStyle);
}
//绑定onload事件,在文档载入完毕启动setTagCloudStyle()函数;
</script>
页面部分代码:
<div class="tagCloud" id="tagCloud">
<a href='[field:link/]'>Google</a> <a href='[field:link/]'>Baidu</a>
<a href='[field:link/]'>Config</a>
</div>
