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>
(责任编辑:admin) |