jQuery热门文字标签云代码


WX20180925-134445@2x


下载链接: 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>