try:標籤雲

jqcloud

by cactus77kiki

HTML

<!--try:標籤雲(jqcloud)-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.4/jqcloud-1.0.4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.4/jqcloud.css" />

<div id="example" style="width:350px;height:350px;"></div>

<div class="content" style="display:none;">
  <ul class="tagzone">
    <li >
      <a href="%E3%82%A4%E3%82%AE%E3%83%AA%E3%82%B9">イギリス</a>
      <span>7</span>
    </li>
    <li >
      <a href="%E9%80%B1%E6%9C%AB">週末</a>
      <span>11</span>
    </li>
    <li >
      <a href="%E3%83%96%E3%83%AA%E3%82%B9%E3%83%88%E3%83%AB">ブリストル</a>
      <span>10</span>
    </li>
    <li >
      <a href="%E3%83%96%E3%83%AA%E3%82%B9%E3%83%88%E3%83%AB">台灣</a>
      <span>13</span>
    </li>
    <li >
      <a href="%E3%83%96%E3%83%AA%E3%82%B9%E3%83%88%E3%83%AB">天氣好熱</a>
      <span>9</span>
    </li>
    <li >
      <a href="%E3%83%96%E3%83%AA%E3%82%B9%E3%83%88%E3%83%AB">想去日本</a>
      <span>8</span>
    </li>
    <li >
      <a href="%E3%83%96%E3%83%AA%E3%82%B9%E3%83%88%E3%83%AB">人生好難</a>
      <span>6.2</span>
    </li>
    <li >
      <a href="%E3%83%96%E3%83%AA%E3%82%B9%E3%83%88%E3%83%AB">銀河</a>
      <span>5</span>
    </li>
    <li >
      <a href="%E3%83%96%E3%83%AA%E3%82%B9%E3%83%88%E3%83%AB">瘦身</a>
      <span>5</span>
    </li>
    </ul>
    </div>

CSS

/*#example {
    width: 300px;
    height: 300px;
    background-color: #EEA039;
    color: #FFFFFF;
}
#example span {
	cursor: pointer;
}

#example w10 {
  color:#FFFFFF;
}*/

JavaScript

var mylist=[];
$("ul.tagzone > li").each(function () {
  
  mylist.push({
    text: $(this).children("a").text().trim(),
    weight: $(this).children("span").text().trim(),
    link: $(this).children("a").attr('href')
    });
});
        // When DOM is ready, select the container element and call the jQCloud method, passing the array of words as the first argument.
        console.log(mylist);
jQuery( document ).ready(function() {
$("#example").jQCloud(mylist, {
colors: ["#FFFFFF","#FDF6EB","#FCECD7","#FAE2C4","#F8D9B0","#F6D09C"],
      fontSize: {
        from: 0.1,
        to: 0.02
      }
});

});