jQuery热门城市文字标签云模板代码，鼠标放在上面有曝光数展示，整体效果不错，比较热的城市名称字体特惠更大些。
效果
核心代码
<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;
}
});
}
$(function() {
$("#my_favorite_latin_words").jQCloud(word_list);
});
var string_list = string_;
var word_list = eval("[" + string_list + "]");
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>
资源下载
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
优网导航，专注收录与分享优质网站、工具、资源，打造一站式导航网！
友链申请，请右侧加微信联系站长！
