建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

JS网页制作实例:标签云

时间:2012-04-26 19:58来源: 作者: 点击:
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<

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)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片