教你用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 相关文章推荐
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
javascript闭包的理解
Apr 01 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 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
关于页面优化和伪静态
2009/10/11 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
JavaScript OOP类与继承
2009/11/15 Javascript
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
深入源码解析Python中的对象与类型
2015/12/11 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
numpy基础教程之np.linalg
2019/02/12 Python
Python制作词云图代码实例
2019/09/09 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
助理政工师申报材料
2014/06/03 职场文书
禁烟标语大全
2014/06/11 职场文书
物理课外活动总结
2014/08/27 职场文书
自主招生自荐信格式
2015/03/04 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
民主生活会意见
2015/06/05 职场文书
离婚协议书格式范本
2016/03/18 职场文书
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL