JS网页制作实例:标签云 - Web前端

JS实现标签云效果：

实现：
1、随机方法：
javascript代码
function rand(num){
returnparseInt(Math.ranDOM()*num+1);
}

2、随机取色：
JavaScript代码
function randomcolor(){
var str=Math.ceil(Math.random()*16777215).toString(16);
if(str.length<6){
str="0"+str;
}
return str;
}

3、循环dom
xml/html代码

for( len=obj.length,i=len;i--;){
obj[i].style.left=rand(600)+"px";
obj[i].style.top=rand(400)+"px";
obj[i].className="color"+rand(5);
obj[i].style.zIndex=rand(5);
obj[i].style.fontsize=rand(12)+12+"px";
// obj[i].style.background="#"+randomcolor();
obj[i].style.color="#"+randomcolor();
obj[i].onmouSEOver=function(){
this.style.background="#"+randomcolor();
}
obj[i].onmouseout=function(){
this.style.background="none";
}
}

4、dom结构
XML/HTML代码

<div id="wrap">
<a href="#">WEB标准学习</a><a href="#">CSS</a>
<a href="#">Javascript</a><a href="#">html5</a>
<a href="#">Canvas</a><a href="#">Video</a>
<a href="#">audio</a><a href="#">JQuery</a>
<a href="#">jQuerymobile</a><a href="#">FLASH</a>
<a href="#">firefox</a><a href="#">Chrome</a>
<a href="#">opera</a><a href="#">ie9</a>
<a href="#">css3.0</a><a href="#">andriod</a>
<a href="#">apple</a><a href="#">google</a><a href="#">jobs</a>
</div>