教你用javascript实现随机标签云效果_附代码


Posted in Javascript onMarch 16, 2016

标签云是一套相关的标签以及与此相应的权重。典型的标签云有30至150个标签。权重影响使用的字体大小或其他视觉效果。同时,直方图或饼图表是最常用的代表约12种不同的权数。因此,标签云彩能代表更多的权,尽管不那么准确。此外,标签云通常是可以交互的:标签是典型的超链接,让用户可以仔细了解他们的内容。
 
大概可以理解为一堆相关或者不相关的标签混到一块,根据不同的重要程度,或者其他维度的不同来为每个标签设置不同的样式已凸显他们的不同,这样的一堆标签在一起就是我们通常说的标签云了。
 
下面我们大概说一下标签云实现的原理:
明白了标签云是咋回事儿那么实现起来就简单了,其实就是根据每个标签的不同的重要性设置不同的样式就可以了。
这里我们使用随机数实现一个简单的标签云,不是根据某些维度来实现,纯粹的随机样式。这边标签云实际是一堆a标签,然后随机设置颜色和字体大小,当然字体大小有个最大最小限制的。
1、我们设置了一个取随机数函数,和一个随机颜色函数,通过这两个函数为标签设置样式。
2、我们把所有的a标签循环,然后利用步骤一里边的随机数,和随机颜色设置这些标签的字体大小和颜色。
 
查看效果如下:

教你用javascript实现随机标签云效果_附代码

一个简单的标签云就完事了。

其实我们还可以吧样式设置到样式文件,然后通过为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="#">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(){
  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实现随机标签云效果_附代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于IFRAME 自适应高度的研究
Jul 20 Javascript
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 #Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 #Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 #Javascript
js获取时间精确到秒(年月日)
Mar 16 #Javascript
js实现内容显示并使用json传输数据
Mar 16 #Javascript
javascript中arguments,callee,caller详解
Mar 16 #Javascript
Bootstrap每天必学之滚动监听
Mar 16 #Javascript
You might like
PHP脚本的10个技巧(1)
2006/10/09 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
php实现倒计时效果
2015/12/19 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
Python学习笔记_数据排序方法
2014/05/22 Python
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
利用python循环创建多个文件的方法
2018/10/25 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
Python class的继承方法代码实例
2020/02/14 Python
国际花店:Pickup Flowers
2020/04/10 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
营销与策划应届生求职信
2013/11/04 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
党支部考察意见范文
2015/06/02 职场文书
高中班主任心得体会
2016/01/07 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
vue特效之翻牌动画
2022/04/20 Vue.js
vue动态绑定style样式
2022/04/20 Vue.js