jQuery热门文字标签云代码
下载链接: https://pan.baidu.com/s/1MIakKolKk0cjsm9PS3PRyg 提取码: t7vv
<!DOCTYPE html>
<html>
<head>
<title>jQuery热门文字标签云代码</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/jqcloud.css" />
<script src="js/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jqcloud-1.0.4.js" type="text/javascript" charset="utf-8"></script>
<style>
.append_div {
background: black;color:#FFFFFF; opacity:0.5; text-align: center; position: absolute; height: 100px; width: 80px;
}
</style>
<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()'}},";
}
var string_list = string_;
var word_list = eval("[" + string_list + "]");
$(function() {
$("#my_favorite_latin_words").jQCloud(word_list);
});
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 />IP "+item[1]+"<br /> PV "+item[2];
$("#my_favorite_latin_words").after("<div class='append_div' style='left:" + ev.clientX + "px; top:" + ev.clientY + "px; '>" + html + "</div>");
return;
}
});
}
function on_mouseout() {
$(".append_div").remove();
}
</script>
</head>
<body>
<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>