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. enumerate

    enumerate 函数用于遍历序列中的元素并分配一个序号(序号默认从零开始 可以制定任意值): >>> for i,j in enumerate(('a','b','c')): p ...

  2. ImageSwitcher的应用

    在android的开发中很多时候都会用到图片的切换,我相信大家在安装完apk后,都会遇到弹出用户向导,介绍本版本apk的新功能,如果你用的是平板电脑或手机的话,可以左右滑动以切换视图,如果你用的是an ...

  3. commondline 之一 常识

    用法: 执行类执行 jar 文件 java [-options] class [args...]java [-options] -jar jarfile [args...] 常识:javac Some ...

  4. Unable to load dll 的解决方案

    前几天在做项目时,需要用到一个非托管的 dll 库,其实使用 .Net 的互操作技术可以很方便地调用非托管 dll 文件中的函数,但是在执行时出现了“Unable to load dll HRESUL ...

  5. 【PAT】1020. Tree Traversals (25)

    Suppose that all the keys in a binary tree are distinct positive integers. Given the postorder and i ...

  6. 图片转换成base64_encode的链接代码示例

    <?php $file = "example.jpg"; $type = getimagesize( $file ); //取得图片的大小,类型等 $file_content ...

  7. 动态链接--so的搜索过程

    可执行文件所依赖的so路径保存在.dynamic 里面,由DT_NEED类型表示.如下: 如果DT_NEED里面保存的是绝对路径,那ld就在绝对路径下查找so. 如果DT_NEED里面保存的是相对路径 ...

  8. Windows 10 Edge浏览器、照片查看程序关闭“平滑滚动”

    升级到10后,这两个常用软件的“平滑滚动”功能,个人感觉体验有点不好,特别是图片这个自带程序,看了几十张图后就有点头晕了,所以把它关闭为好: 控制面板\系统和安全\系统\高级系统设置\高级\性能\设置 ...

  9. java 编译带包文件

    问题   假设两个文件:     D:\workspace\com\A.java     D:\workspace\com\B.java 两个文件都有:     package com;   如何编译 ...

  10. 非常好的在网页中显示pdf的方法

    今天有一需求,要在网页中显示pdf,于是立马开始搜索解决方案,无意中发现一个非常好的解决方法,详见http://blogs.adobe.com/pdfdevjunkie/web_designers_g ...