jQCloud的简单使用

在jsp页面引入jquery,jqcloud-1.0.4.min.js,jqcloud.css

<script type="text/javascript" src="/resource/js/jquery.min.js"></script>
<script type="text/javascript" src="/resource/js/jQclound/jqcloud-1.0.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="/resource/js/jQclound/jqcloud.css"/>

需有一个div 显示效果

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

以下是js代码

<script type="text/javascript">
var lin = "http://www.360.com";
var word_array = [
                  {text: "谷歌", weight: 15,html: {title: "全球最大的搜索引擎"}}, //title 提示
                  {text: "百度", weight: 9, link: "http://www.baidu.com/"},
                  {text: "搜狗", weight: 6, link: "http://www.sougou.com/"},
                  {text: "360", weight: 7,link:lin}
              ];
$(function() {
    $("#example").jQCloud(word_array);
  });

</script>

运行效果如下

        

转载于:https://my.oschina.net/u/3190930/blog/821225