《教你用javascript实现随机标签云效果_附代码_.docx》由会员分享，可在线阅读，更多相关《教你用javascript实现随机标签云效果_附代码_.docx（5页珍藏版）》请在三一文库上搜索。
1、教你用javascript实现随机标签云效果_附代码_ 标签云是一套相关的标签以及与此相应的权重。典型的标签云有30至150个标签。权重影响用法的字体大小或其他视觉效果。同时，直方图或饼图表是最常用的代表约12种不同的权数。因此，标签云彩能代表更多的权，尽管不那么精准。此外，标签云通常是可以交互的：标签是典型的超链接，让用户可以认真了解他们的内容。 也许可以理解为一堆相关或者不相关的标签混到一块，依据不同的重要程度，或者其他维度的不同来为每个标签设置不同的样式已凸显他们的不同，这样的一堆标签在一起就是我们通常说的标签云了。 下面我们也许说一下标签云实现的原理： 明白了标签云是咋回事儿那么实现起
2、来就简洁了，其实就是依据每个标签的不同的重要性设置不同的样式就可以了。 这里我们用法随机数实现一个简洁的标签云，不是依据某些维度来实现，纯粹的随机样式。这边标签云实际是一堆a标签，然后随机设置颜色和字体大小，当然字体大小有个最大最小限制的。 1、我们设置了一个取随机数函数，和一个随机颜色函数，通过这两个函数为标签设置样式。 2、我们把全部的a标签循环，然后利用步骤一里边的随机数，和随机颜色设置这些标签的字体大小和颜色。 查看效果如下: 一个简洁的标签云就完事了。 其实我们还可以吧样式设置到样式文件，然后通过为a标签设置class来设置a标签的样式，这样敏捷性更大。 假如需要依据某些维度来设置的
3、话，那么可以给a标签设置好这种维度的属性，然后依据这些属性来设置样式。 下面看代码： 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/
4、a a href=#css3.0/a a href=#andriod/a a href=#apple/a a href=#google/a a href=#jobs/a /div javascript代码： window.onload=function() var obox=document.getElementById(wrap); var obj=obox.getElementsByTagName(a); /随机方法 function rand(num) return parseInt(Math.random()*num+1); /随机颜色值 function randomcolor()
5、var str=Math.ceil(Math.random()*16777215).toString(16); if(str.length6) str=0+str; return str; /循环 for( len=obj.length,i=len;i-;) obji.className=color+rand(5); obji.style.zIndex=rand(5); obji.style.fontSize=rand(12)+12+px; / obji.style.background=#+randomcolor(); obji.style.color=#+randomcolor(); obji.onmouseover=function() this.style.background=#+randomcolor(); obji.onmouseout=function() this.style.background=none; 以上这篇教你用javascript实现随机标签云效果_附代码就是我分享给大家的全部内容了，盼望能给大家一个参考 .