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. labview视频采集IMAdx

    grab(连续采集) 摄像头打开之后便一直采集图像,存储在IMAQ开辟的临时空间里,只要while循环不断的读取临时空间就可以显示当前图像(grab调用的是image句柄)

  2. Oracle数据库编程：在JDBC中应用Oracle

    9.在JDBC中应用Oracle: JDBC访问数据库基本步骤:          1.加载驱动          2.获取链接对象          3.创建SQL语句          4.提交S ...

  3. 10个经典的Java main 方法面试题

    1. 不用main方法如何定义一个类? 不行,没有main方法不能运行Java类. 在Java 7之前,你可以通过使用静态初始化运行Java类.但是,从Java 7 开始就不行了. 2. main() ...

  4. DNS与DNS劫持原理、IP、域名、服务器访问浅讲

    我们都知道,平常我们所访问的网站,都是与服务器进行数据交互的.但是,浏览器和服务器是分处于不同的计算机上的,那他们是怎样进行通信的呢?今天,我们就来粗浅地聊一聊.不涉及很深的技术原理,只讲大概的流程. ...

  5. Cipher Message

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=34121#problem/C // File Name: c.cpp // Author: ...

  6. 函数 MultiByteToWideChar() 详解

    函数原型: int MultiByteToWideChar( UINT CodePage, DWORD dwFlags, LPCSTR lpMultiByteStr, int cchMultiByte ...

  7. STM32 + RT Thread OS 学习笔记[三]

    RTGUI 据说RTGUI是多线程的,因此与RT-Thread OS的耦合度较高,有可能要访问RT-Thread的线程控制块.如果要移植到其它OS,估计难度较大.目前还处于Alpha状态,最终将会包含 ...

  8. 推荐第三方Oracle客户端查询工具

    1.SqlDbx 官方地址:http://www.sqldbx.com/personal_edition.htm 2.devart http://www.devart.com/dbforge/orac ...

  9. Hex-Rays decompiler type definitions and convenience macros

    /****************************************************************************************** Copyrigh ...

  10. Delphi调用WebService（通过SoapHeader认证）经验总结

    项目(Delphi开发)需要调用另一个系统的WebService.走了不少弯路,现记录总结一下经验.以下是WebService要求: 1.WebService概述 营销Webservice接口采用Ap ...