这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇教你用 javascript 实现随机标签云效果_附代码。小编觉得很实用,现在分享给大家。给大家一个参考
标签云是一套相关的标签以及与此相应的权重。典型的标签云有 30 至 150 个标签。权重影响使用的字体大小或其他视觉效果。同时,直方图或饼图表是最常用的代表约 12 种不同的权数。因此,标签云彩能代表更多的权,尽管不那么准确。此外,标签云通常是可以交互的:标签是典型的超链接,让用户可以仔细了解他们的内容。 大概可以理解为一堆相关或者不相关的标签混到一块,根据不同的重要程度,或者其他维度的不同来为每个标签设置不同的样式已凸显他们的不同,这样的一堆标签在一起就是我们通常说的标签云了。 下面我们大概说一下标签云实现的原理: 明白了标签云是咋回事儿那么实现起来就简单了,其实就是根据每个标签的不同的重要性设置不同的样式就可以了。 这里我们使用随机数实现一个简单的标签云,不是根据某些维度来实现,纯粹的随机样式。这边标签云实际是一堆 a 标签,然后随机设置颜色和字体大小,当然字体大小有个最大最小限制的。 1、我们设置了一个取随机数函数,和一个随机颜色函数,通过这两个函数为标签设置样式。 2、我们把所有的 a 标签循环,然后利用步骤一里边的随机数,和随机颜色设置这些标签的字体大小和颜色。 查看效果如下:
一个简单的标签云就完事了。
其实我们还可以吧样式设置到样式文件,然后通过为 a 标签设置 class 来设置 a 标签的样式,这样灵活性更大。
如果需要根据某些维度来设置的话,那么可以给 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
- </a>
- <a href="#">
- css3.0
- </a>
- <a href="#">
- andriod
- </a>
- <a href="#">
- apple
- </a>
- <a href="#">
- </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(){
- var str=Math.ceil(Math.random()*16777215).toString(16);
- if(str.length<6){
- str="0"+str;
- }
- return str;
- }
- //循环
- for( len=obj.length,i=len;i--;){
- 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";
- }
- }
- }
以上这篇教你用 javascript 实现随机标签云效果_附代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0406/266674.html