jqcloud 標籤雲效果

時間 2019-12-07

標籤 jqcloud 標籤效果简体版

原文原文鏈接

官網地址： http://mistic100.github.io/jQCloud/index.html
github 地址： https://github.com/lucaong/jQCloud
使用css

<!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="width: 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'  //修改形狀或 默認 橢圓        });
      });
</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>elliptic''rectangular'

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。