zoukankan      html  css  js  c++  java
  • jqcloud 标签云效果

    官网地址: http://mistic100.github.io/jQCloud/index.html
    github 地址: 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=" 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>
  • 相关阅读:
    递归
    linq语法
    客户端(winform)更新
    c# 实时监控数据库 SqlDependency
    C# MVC NPOI导出
    mui手机图片压缩上传+C#
    vs连接Oracle 客户端库时引发 BadImageFormatException
    一对多的子表数据利用游标循环更新主表的数据
    数据库的恢复数据语句
    mysql三-2:数据类型
  • 原文地址:https://www.cnblogs.com/Kyaya/p/11059833.html
Copyright © 2011-2022 走看看