ryoakg
11/3/2015 - 6:25 AM

jQCloud Demo.html

jQCloud Demo.html
content_copyfile_download
<!DOCTYPE html>
<html>
    <title>jQCloud Demo</title>
    <link rel="stylesheet" type="text/css" href="jqcloud.css">
    <!-- <link rel="stylesheet" type="text/css" href="https://github.com/lucaong/jQCloud/raw/master/jqcloud/jqcloud.css"> -->
    <script type="text/javascript" src="jquery.min.js"></script>
    <!-- <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> -->
    <script type="text/javascript" src="jqcloud-1.0.0.min.js"></script>
    <!-- <script type="text/javascript" src="https://github.com/lucaong/jQCloud/raw/master/jqcloud/jqcloud-1.0.4.min.js"></script> -->

    
    <script type="text/javascript">
     var list = [
         "さかな",
         "うま",
         "いぬ",
     ];
     var word_list=[]
     for (var i=0; i<list.length; i++)
         word_list.push({text:list[i], weight:(Math.random() * 4 + 10)})
     $(document).ready(function() {
         $("#wordcloud").jQCloud(word_list);
     });
    </script>
    <style type="text/css">
      body {
        background: #eee;
        font-family: Helvetica, Arial, sans-serif;
      }
      #wordcloud {
        margin: 30px auto;
        padding: 100px;
        width: 600px;
        height: 371px;
        border: none;
        overflow: visible;
      }
      #wordcloud span.w10, #wordcloud span.w9, #wordcloud span.w8, #wordcloud span.w7 {
        text-shadow: 0px 1px 1px #ccc;
      }
      #wordcloud span.w3, #wordcloud span.w2, #wordcloud span.w1 {
        text-shadow: 0px 1px 1px #fff;
      }
    </style>

</head>
  <body>
      <div id="wordcloud"></div>
  </body>
</html>