官网地址： http://mistic100.github.io/jQCloud/index.htmlgithub 地址： https://github.com/lucaong/jQCloud使用

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<link rel="stylesheet" href="dist/jqcloud.css">

	<script src="jquery2.1.4.js"></script>

	<script src="dist/jqcloud.js"></script>

</head>

<body>

	<div id="tagcloud" style="width: 80%; height: 450px; align-self: center;"></div>

</body>

</html>

<script>

     var word_array = [

          {text: "Lorem", weight: 15},

          {text: "Ipsum", weight: 9, link: "http://jquery.com/"},

          {text: "Dolor", weight: 6, html: {title: "I can haz any html attribute"}},

          {text: "Sit", weight: 7},

          {text: "Amet", weight: 5},

          {text: "Amet", weight: 8},

          {text: "Amet", weight: 9},

          {text: "Amet", weight: 3},

          {text: "Amet", weight: 6},

          // ...as many words as you want

      ];

       $(function() {

        // When DOM is ready, select the container element and call the jQCloud method, passing the array of words as the first argument.

       $("#tagcloud").jQCloud(word_array,{
            shape:'elliptic'  //修改形状elliptic'或'rectangular' 默认 椭圆
        });

      });

</script>
<style>
// 自定义字体大小 字体颜色
div.jqcloud span.w10 { color: #488fec; }
div.jqcloud span.w9 { color: #e8e1b6; }
div.jqcloud span.w8 { color: #bd3b39; }
div.jqcloud span.w7 { color: #35bdeb; }
div.jqcloud span.w6 { color: #00c3c5; }
div.jqcloud span.w5 { color: #488fec; }
div.jqcloud span.w4 { color: #e8e1b6; }
div.jqcloud span.w3 { color: #bd3b39; }
div.jqcloud span.w2 { color: #35bdeb; }
div.jqcloud span.w1 { color: #ba3531; }

div.jqcloud span.w10 { font-size: 36px; }
div.jqcloud span.w9 { font-size: 20px; }
div.jqcloud span.w8 { font-size: 28px; }
div.jqcloud span.w7 { font-size: 16px; }
div.jqcloud span.w6 { font-size: 40px; }
div.jqcloud span.w5 { font-size: 18px; }
div.jqcloud span.w4 { font-size: 16px; }
div.jqcloud span.w3 { font-size: 36px; }
div.jqcloud span.w2 { font-size: 24px; }
div.jqcloud span.w1 { font-size: 20px; }
</style>

jqcloud 标签云效果的更多相关文章

  1. 基于纯 CSS3 技术实现美观的标签云效果

    标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...

  2. vue实现标签云效果

    闲扯两句 最近想给自己的博客上加上一个3D标签云的效果,用来表示自己博客文章的分组,网上找到了canvas实现的,还有a元素实现的解析3D标签云,我想让标签可以选择和点击,又不想在标签数量较多时操作a ...

  3. js 标签云效果

    下载:http://files.cnblogs.com/zjfree/js_tag_list.rar 效果如下: 源码如下: <html> <head> <meta ht ...

  4. JavaScript实现的3D球面标签云效果

    这个效果都是由 FLASH 实现的,能不能由 JavaScript 实现呢? 我们也十分喜欢这个效果,就花了一些时间写出来了,如图所示: 效果预览点这里:http://www.miaov.com/mi ...

  5. 用CSS制作伪标签云

    performance testing stress testing conformance testing acceptane testing smoke testing regression te ...

  6. [翻译] DKTagCloudView - 标签云View

    DKTagCloudView 效果(支持点击view触发事件): Overview DKTagCloudView is a tag clouds view on iOS. It can generat ...

  7. JQCloud: 一个前端生成美化标签云的简单JQuery插件

    本文原文地址:https://jiang-hao.com/articles/2018/blog-JQCloud.html 因为博客需要,发现了一个生成美化简约风格的标签云的JQuery插件. 官网地址 ...

  8. SP2010 3D标签云Web部分--很酷的效果，强烈推荐！！

    SP2010 3D标签云Web部分--很酷的效果.强烈推荐! ! 项目描述叙事         基于简单Flash的3D标签云Web部件.SP Server 2010使用. 建立在内置标签云Web部件 ...

  9. Android自定义控件之自定义ViewGroup实现标签云

    前言: 前面几篇讲了自定义控件绘制原理Android自定义控件之基本原理(一),自定义属性Android自定义控件之自定义属性(二),自定义组合控件Android自定义控件之自定义组合控件(三),常言 ...

随机推荐

  1. win8.1使用WP8SDK出现Windows Phone Emulator无法启动的问题解决方案

    近期在win8.1专业版系统的vs2012上装了wp8SDK 体验一把wp开发的快感 安装sdk过程一切顺利 打完代码之后运行调试 问题来了: 提示如下错误 遂百度之 主要的方法就是两步 1.检查机器 ...

  2. sersync+rsync实时数据同步

    sersync+rsync实时数据同步 1.相关背景介绍 前面有关文章配置实现了rsync增量同步以及配置为定时同步,但是在实际生产环境中需要实时的监控数据从而进行同步(不间断同步),可以采取inot ...

  3. DataSet之增删改查操作（DataGridView绑定）

    DataSet数据集,数据缓存在客户端内存中,支持断开式连接.DataGridView控件绑定DataSet时,它自动的改变的DS的行的状态,而且在做增删改查的时候,可以借助SqlCommandBui ...

  4. poj1236 Network of Schools ，有向图求强连通分量（Tarjan算法），缩点

    题目链接: 点击打开链接 题意: 给定一个有向图,求: 1) 至少要选几个顶点.才干做到从这些顶点出发,能够到达所有顶点 2) 至少要加多少条边.才干使得从不论什么一个顶点出发,都能到达所有顶点   ...

  5. Visual Studio 外请版本号管理插件 - AnkhSVN

    Visual Studio 外请版本号管理插件 - AnkhSVN 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致 ...

  6. python 类特殊成员

    class Foo: def __init__(self,age): self.age=age print('init') def __call__(self): print('call') def ...

  7. javascript - 封装ajax

    封装,使用有示例. // 封装示例: function ajax(url, method, params, done) { var xhr = null; method = method.toUppe ...

  8. 在eclipse中使用Maven建web工程的两种方式

    Eclipse版本:Neon Release (4.6.0) Maven版本:3.3.9 第一种方式: 右键新建maven工程,勾选创建一个简单工程 填入信息,注意打包方式要改为war 点击完成,创建 ...

  9. Mysql视图的创建及使用

    视图理解: 视图又叫虚表.同真实的表一样,视图包含一系列带有名称的列和行数据.但是,视图并不在数据库中以存储的数据值集形式存在.行和列数据来自由定义视图的查询所引用的表,并且在引用视图时动态生成. 视 ...

  10. SQL的四种连接

    SQL的四种连接-内连接.左外连接.右外连接.全连接   今天在看一个遗留系统的数据表的时候发现平时查找的视图是FULL OUT JOIN的,导致平时的数据记录要进行一些限制性处理,其实也可以设置视图 ...