DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS網頁制作實例:標簽雲
JS網頁制作實例:標簽雲
編輯:關於JavaScript     

js實現標簽雲效果:

 

實現:
1、隨機方法:
JavaScript代碼
function rand(num){
return parseInt(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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved