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. hdu 4289 Control（最小割 + 拆点）

    http://acm.hdu.edu.cn/showproblem.php?pid=4289 Control Time Limit: 2000/1000 MS (Java/Others)    Mem ...

  2. Python基础 字符串的魔法

    capitalize(self) 返回值:将字符串的第一个首字母变成大写,其他字母变小写 s = 'hello World' ss = s.capitalize() print(ss) Hello w ...

  3. 检测iOS的APP性能的一些方法

    首先如果遇到应用卡顿或者因为内存占用过多时一般使用Instruments里的来进行检测.但对于复杂情况可能就需要用到子线程监控主线程的方式来了,下面我对这些方法做些介绍: Time Profiler ...

  4. WEB数据挖掘（十三）——关联规则与序列模式（1）

    一.Apriori算法简介:  Apriori算法是一种挖掘关联规则的频繁项集算法,其核心思想是通过候选集生成和情节的向下封闭检测两个阶段来挖掘频繁项集. Apriori(先验的,推测的)算法应用广泛 ...

  5. 读数据库表填充DataTable

    我一般用的有2中方法: 1.数据填充 string sqlcmd="select * from table"; SqlDataAdapter adapder = new SqlDa ...

  6. jquery与ajax应用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 对于C语言中数组名是指针的理解

    我们都知道,c语言中数组名是一个指针,比如下面这段代码 #include<iostream>using namespace std;int main(){ int a[4]={1,2,3, ...

  8. HITAG 2 125kHz RFID IC Read-Write 256 bits

    Features 256 bits EEPROM memory organized in 8 pages of 32 bits each 32 bits unique factory programm ...

  9. PostgreSQL中的AnyArray例子

    http://www.joeconway.com/presentations/function_basics.pdf CREATE FUNCTION myappend(anyarray, anyele ...

  10. ExtJS grid tableGrid study

    Q:  How to color the text in the grid Try: http://dev.sencha.com/playpen/docs/output/Ext.grid.TableG ...