jqcloud.js jquery 文字云效果插件-BFW插件库

jqcloud.js jquery 文字云效果插件

第一步引入bfwone 加载依赖项jquery

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        var data = [
            ['广州', 13, 100],
            ['浙江', 10, 123],
            ['江苏', 9, 222],
            ['北京', 8, 111],
            ['上海', 7, 111],
            ['河南', 6, 111],
            ['河北', 5, 111],
            ['四川', 5, 111],
            ['安徽', 5, 111],
            ['湖北', 5, 111],
            ['福建', 4, 111],
            ['辽宁', 4, 111],
            ['湖南', 3, 111],
            ['陕西', 3, 111],
            ['广西', 3, 111],
            ['江西', 3, 111],
            ['重庆', 3, 111],
            ['天津', 3, 111],
            ['云南', 2, 111],
            ['山西', 2, 111],
            ['黑龙江', 2, 111],
            ['吉林', 2, 111],
            ['内蒙古', 2, 111],
            ['贵州', 2, 111],
            ['甘肃', 2, 111],
            ['海南', 2, 111],
            ['宁夏', 2, 111],
            ['青海', 1, 111],
            ['西藏', 1, 111],
            ['香港', 1, 111],
            ['未知', 1, 111],
            ['台湾', 1, 111]
        ];

        var string_ = "";
        for (var i = 0; i < data.length; i++) {
            var string_f = data[i][0];
            var string_n = data[i][1];
            string_ += "{text: '" + string_f + "', weight: '" + string_n + "',html: {'class': 'span_list',onmouseover:'on_mouseover(this,event)',onmouseout:'on_mouseout()'}},";
        }

        function on_mouseover(e, ev) {
            var txt = $(e).html();
            ev = ev || event;
            $.each(data, function(i, item) {
                if (txt == item[0]) {
                    var html = item[0]+"<br />投量数"+item[1]+"<br />"+item[2];
                    $("#my_favorite_latin_words").after("<div class='append_div' style='left:" + ev.clientX + "px; top:" + ev.clientY + "px; '>" + html + "</div>");
                    return;
                }

            });
        }

        var string_list = string_;
        var word_list = eval("[" + string_list + "]");

        function on_mouseout() {
            $(".append_div").remove();
        }
        bready(function() {
            use(["jqcloud", "jqcloud"], function() {
                $("#my_favorite_latin_words").jQCloud(word_list);
            });
        });
    </script>
</head>
<body>
    <style>
        .append_div {
            background: black;
            color: #FFFFFF;
            opacity: 0.5;
            text-align: center;
            position: absolute;
            height: 100px;
            width: 80px;
        }
    </style>



    <div class="" style="width: 100%;">
        <div id="my_favorite_latin_words" style="width: 400px; margin: 0px auto; height: 400px; border: 1px solid #ccc; "></div>
    </div>


</body>
</html>