jQCloud使用与样式调整（词汇距离、词汇点击、词汇效果）

jQCloud简介

jQCloud是一款漂亮的词云软件，效果如图：

词云效果

可以设置鼠标滑过效果，点击跳转链接等，功能十分强大。

jQCloud使用

jQCloud的使用也十分简单，包括一个js文件与一个css文件。项目github地址如下：
https://github.com/lucaong/jQCloud

下载js与css文件后导入即可使用。

使用说明

准备工作

首先需要导入文件并构建页面：

<html>
  <head>
  //注意先加载jquery
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="jqcloud-1.0.4.js"></script>
  <linkrel="stylesheet"type="text/css"href="jqcloud.css"/>
  <script 
  <style>
  .git_tags{
    width:380px;
    height: 250px;;
}
  </style>
  <head>
  <body>
  <div id="git" class="git_tags">
  </div>
  </body>
</html>

词云构建

在使用时，需要先建立一个字典存放数据。

//text：名称
//weight：权值，决定词汇的大小
//link：连接地址
//handlers：可指定一个js事件
var word_array = [
        {text: "信息", weight: 12, handlers:{click:function(){alert(“from –ifxoxo.com”)}}},
    {text: "PS", weight: 8, link: "./info.html"},
    {text: "影视", weight: 4, link: "./info.html"},
    {text: "公文", weight: 18, link: "./info.html"},
    {text: "游戏", weight: 22, link: "./info.html"},
    {text: "源码", weight: 52, link: "./info.html"},
    {text: "教程", weight: 15, link: "./info.html"}
      ];
//构建词云函数
//removeOverflowing：移除溢出范围的词汇，可省略
//width，height：设置大小和高度，由于之前已经在样式中设置，可省略
//shape：词云的形状
$(function() {
    "use strict";
    $("#git").jQCloud(word_array,{
              removeOverflowing:true,
              width:500,
              height:500,
              shape :"rectangular",});
    });

css样式修改

从css样式中挑出经常需要修改的部分进行分析
在最新版中，字体大小使用了相对大小，调整起来更加容易。

//相对大小的字体
//w(n)代表10个权重
div.jqcloud span.w10 { font-size: 400%; }
div.jqcloud span.w9 { font-size: 360%; }
div.jqcloud span.w8 { font-size: 350%; }
div.jqcloud span.w7 { font-size: 240%; }
div.jqcloud span.w6 { font-size: 210%; }
div.jqcloud span.w5 { font-size: 190%; }
div.jqcloud span.w4 { font-size: 170%; }
div.jqcloud span.w3 { font-size: 150%; }
div.jqcloud span.w2 { font-size: 130%; }
div.jqcloud span.w1 { font-size: 110%; }
//下面这条可以对鼠标滑过的效果进行调整，我这里相比原版删除了字体变大效果
div.jqcloud span:hover { color: red; font-weight: bold;}

js函数修改

我认为js里没有什么需要改的，基本可以实现功能，但有一个地方可以改。

//更改此处的数值可以调整单词间距
var overlapping = function(a, b) {
    if (Math.abs(1.0 * a.offsetLeft + a.offsetWidth - 1.0 * b.offsetLeft - b.offsetWidth) < a.offsetWidth + b.offsetWidth) {
            if (Math.abs(2.0 * a.offsetTop + a.offsetHeight - 2.0 * b.offsetTop - b.offsetHeight) < a.offsetHeight + b.offsetHeight) {
                            return true;
                        }
                    }
                    return false;
                };

更多其他参数可以进入Github查看。

最后编辑于：2019.04.10 21:44:03