JS Web page Production Example: Tag cloud

Article Introduction: JS implementation Tag cloud effect.

JS implementation Tag Cloud effect:

Realize:
1. Random Method:
JavaScript code
function rand (num) {
Return parseint (Math.random () *num+1);
}

2. Randomly take color:
JavaScript code
function Randomcolor () {
var Str=math.ceil (Math.random () *16777215). toString (16);
if (str.length<6) {
Str= "0" +STR;
}
return str;
}

3. Loop Dom
xml/html Code

For (len=obj.length,i=len;i--;) {
Obj[i].style.left=rand (+) + "px";
Obj[i].style.top=rand () + "px";
Obj[i].classname= "Color" +rand (5);
Obj[i].style.zindex=rand (5);
Obj[i].style.fontsize=rand () +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 structure
xml/html Code

<div id= "Wrap" >
<a href= "#" >web Standard learning </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>