html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

    <link rel="stylesheet" type="text/css" href="cloud.css"/>

</head>

<body>

    <h1>web-html</h1>

    <p id="elenum"></p>

    <div id="words"></div>

    <h2>h2</h2>

    <script src="scripts/jquery-2.2.2.js"></script>

    <script src="scripts/jqcloud-1.0.4.js"></script>

    <script src="scripts/cloud.js"></script>

</body>

</html>

js

var word_list = [

       { text: "Lorem", weight: 13, link: "https://github.com/DukeLeNoir/jQCloud" },

       { text: "Ipsum", weight: 10.5, html: { title: "My Title", "class": "custom-class" }, link: { href: "http://jquery.com/", target: "_blank" } },

       { text: "Dolor", weight: 9.4 },

       // ...

];

$(function() {

       //$("#my_favorite_latin_words").jQCloud(word_list);

       // how many elements on this page

       var e = $('*').get();

       console.log(e.length);

       // tag name array

       var arr = []

       $.each($('*'), function() {

        //var myname = this.tagName; // HTML

        var myname = this.localName; // html

        if ($.inArray(myname, arr) < 0) {

            arr.push(myname);

        }

       });

       $('#elenum').text("Elements number: " + arr.length);

       console.log("unique:", arr, "lenght:", arr.length);

       // convert to json

       var newarr = [];

       for (i = 0; i < arr.length; i++) {

        var num = $(arr[i]).length;

        var data = {};

        data['text'] = arr[i];

        data['weight'] = num;

        newarr.push(data);

        console.log('tag:' + arr[i], "num:" + num);

       }

       console.log(JSON.stringify(newarr));

       // replace ""

       var rep = JSON.stringify(newarr)

        .replace(/\"text"/g, "text")

        .replace(/\"weight"/g, "weight");

       console.log("->", rep);

       $("#words").jQCloud(newarr, {

        width: 300,

        height: 200

    });

});

https://github.com/lucaong/jQCloud

标签云 - jqcloud 用法的更多相关文章

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

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

  2. WordPress彩色背景标签云实现

    网上有很多的这种效果,但是却几乎没有什么关于彩色背景标签云的教程,网上讲的基本都是让标签云的字体变成彩色而不是背景,我觉得让字体变成彩色有的标签会看不清楚,而且也没有让背景变成彩色好看.先看看效果: ...

  3. Python word_cloud 样例 标签云系列（三）

    转载地址:https://zhuanlan.zhihu.com/p/20436642word_cloud/examples at master · amueller/word_cloud · GitH ...

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

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

  5. 原生js文字标签云上下滚动播放

    效果:http://hovertree.com/texiao/js/25/ 效果图: 代码如下: <!DOCTYPE html> <html> <head>< ...

  6. pycloudtag 标签云

    原创,转载请标明 QQ:231469242 # -*- coding: utf-8 -*- """Python3.0 Created on Sat Nov 26 08:5 ...

  7. 用CSS制作伪标签云

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

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

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

  9. css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）

    本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...

随机推荐

  1. SFTPTool 和 FTPTooL.java

    两个工具类依赖的jar包: FTPTool.java public static void main(String[] args) throws Exception{ FTPTooL ftpTool ...

  2. c# spring aop的简单例子

    刚刚完成了一个c#的spring aop简单例子,是在mac下用Xamarin Studio开发的.代码如下: 接口 using System; using System.Collections.Ge ...

  3. Maven Archetype Plugin

    使用Archetype的一般步骤 命令——mvn archetype:generate 输入命令后,Archetype插件会输出一个Archetype列表供用户选择:选择自己想要使用的Archetyp ...

  4. oracle学习 十二 使用.net程序调用带返回值的存储过程（持续更新）

    数据库返回的是结果集,存储过程返回的是一个或者多个值,所以不要使用while循环去读取,也不要使用datareader函数去调用.v_class_name是返回函数 使用.net调用oracle数据库 ...

  5. HDU 5489 Removed Interval (LIS变形)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5489 给你n个数,要删去其中连续的L个,问你删去之后的LIS最大是多少? 我们先预处理出以i下标为开头 ...

  6. JPA 原生态SQL 的复杂查询之createNamedQuery

    JPA 原生态SQL 的复杂查询之createNamedQuery调用存储过程,返回的List字段对应的填充实体============实体类,调用存储过程====================== ...

  7. Android导入自定义的jar包时出现 E/AndroidRuntime(486): java.lang.NoClassDefFoundError错误

    把自定义的jar包放在Android的工程的libs目录下,运行程序,会出现一下错误: 10-10 08:34:06.479: E/dalvikvm(486): Could not find clas ...

  8. JavaScript 不重复的随机数

    在 JavaScript 中,一般产生的随机数会重复,但是有时我们需要不重复的随机数,如何实现?本文给于解决方法,需要的朋友可以参考下     在 JavaScript 中,一般产生的随机数会重复,但 ...

  9. php获取GET方式传入的全部变量名称与值:foreach用法

    $count = count($_GET); $i = 0; foreach ($_GET as $key => $value) { if ($i == $count - 1) { $str . ...

  10. wikioi 1083 Cantor表

    题目描述 Description 现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的.他是用下面这一张表来证明这一命题的: 1/1 1/2 1/3 1/4 1/5 - 2/1 2/ ...