重點技術-首頁標籤製做

樣式設計代碼：

<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())];
   //隨機設置每一個&lt;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>