image.png
使用jqcloud-1.0.4
(function($) {
"use strict";
$.fn.jQCloud = function(word_array, options) {
// 容器元素的引用
var $this = this;
// 都已ID命名 避免多个标签之间的碰撞
var cloud_namespace = $this.attr('id') || Math.floor((Math.random() * 1000000)).toString(36);
// 默认选项值
var default_options = {
width: $this.width(),
height: $this.height(),
center: {
x: ((options && options.width) ? options.width : $this.width()) / 2.0,
y: ((options && options.height) ? options.height : $this.height()) / 2.0
},
delayedMode: word_array.length > 50,
shape: false, // 默认为椭圆形状
encodeURI: true,
removeOverflowing: true
};
options = $.extend(default_options, options || {});
// “jqcloud”类添加到容器简单的CSS样式,设置容器宽度/高度
$this.addClass("jqcloud").width(options.width).height(options.height);
// 容器的CSS位置不能为“静态”
if ($this.css("position") === "static") {
$this.css("position", "relative");
}
var drawWordCloud = function() {
//Helper函数来测试如果一个元素重叠
var hitTest = function(elem, other_elems) {
// 两两重叠检测
var overlapping = function(a, b) {
if (Math.abs(2.0 * a.offsetLeft + a.offsetWidth - 2.0 * b.offsetLeft - b.offsetWidth) < a.offsetWidth + b.offsetWidth) {
if (Math.abs(2.0 * a.offsetTop + a.offsetHeight - 2.0 * b.offsetTop - b.offsetHeight) < a.offsetHeight + b.offsetHeight) {
return true;
}
}
return false;
};
var i = 0;
// 检查元素重叠一个接一个,停止并返回false一旦发现重叠
for (i = 0; i < other_elems.length; i++) {
if (overlapping(elem, other_elems[i])) {
return true;
}
}
return false;
};
// 确保每一个重量之前是一个数字排序
for (var i = 0; i < word_array.length; i++) {
word_array[i].weight = parseFloat(word_array[i].weight, 10);
}
// 排序word_array从最高的词体重最低的一个
word_array.sort(function(a, b) {
if (a.weight < b.weight) {
return 1;
} else if (a.weight > b.weight) {
return -1;
} else {
return 0;
}
});
var step = (options.shape === "rectangular") ? 18.0 : 2.0,
already_placed_words = [],
aspect_ratio = options.width / options.height;
// 函数画一词,在螺旋通过移动它,直到找到一个合适的空地方。这将是迭代每个单词。
var drawOneWord = function(index, word) {
// 定义跨越的ID属性,将这个词,和相关的jQuery选择器字符串
var word_id = cloud_namespace + "_word_" + index,
word_selector = "#" + word_id,
angle = 6.28 * Math.random(),
radius = 0.0,
// Only used if option.shape == 'rectangular'
steps_in_direction = 0.0,
quarter_turns = 0.0,
weight = 5,
custom_class = "",
inner_html = "",
word_span;
// 扩展词html选项默认值
word.html = $.extend(word.html, {
id: word_id
});
// 如果指定的自定义类,把它们放在一个变量并将它从html attrs,避免由jQCloud覆盖类
if (word.html && word.html["class"]) {
custom_class = word.html["class"];
delete word.html["class"];
}
// 检查是否min(重量)> max(重量)否则使用默认
if (word_array[0].weight > word_array[word_array.length - 1].weight) {
// 线性映射原体重一个离散的规模从1到10
weight = Math.round((word.weight - word_array[word_array.length - 1].weight) /
(word_array[0].weight - word_array[word_array.length - 1].weight) * 9.0) + 1;
}
word_span = $('').attr(word.html).addClass('w' + weight + " " + custom_class);
// 如果单词添加链接。url属性设置
if (word.link) {
//如果链接是一个字符串,然后使用它作为href链接
if (typeof word.link === "string") {
word.link = {
href: word.link
};
}
// 扩展链接的html选项默认值
if (options.encodeURI) {
word.link = $.extend(word.link, {
href: encodeURI(word.link.href).replace(/'/g, "%27")
});
}
inner_html = $('').attr(word.link).text(word.text);
} else {
inner_html = word.text;
}
word_span.append(inner_html);
// 将处理程序绑定到单词
if (!!word.handlers) {
for (var prop in word.handlers) {
if (word.handlers.hasOwnProperty(prop) && typeof word.handlers[prop] === 'function') {
$(word_span).bind(prop, word.handlers[prop]);
}
}
}
$this.append(word_span);
var width = word_span.width(),
height = word_span.height(),
left = options.center.x - width / 2.0,
top = options.center.y - height / 2.0;
// 保存样式属性的引用,获得更好的性能
var word_style = word_span[0].style;
word_style.position = "absolute";
word_style.left = left + "px";
word_style.top = top + "px";
while (hitTest(word_span[0], already_placed_words)) {
// 选择形状是矩形的移动这个词在一个矩形螺旋
if (options.shape === "rectangular") {
steps_in_direction++;
if (steps_in_direction * step > (1 + Math.floor(quarter_turns / 2.0)) * step * ((quarter_turns % 4 % 2) === 0 ? 1 : aspect_ratio)) {
steps_in_direction = 0.0;
quarter_turns++;
}
switch (quarter_turns % 4) {
case 1:
left += step * aspect_ratio + Math.random() * 2.0;
break;
case 2:
top -= step + Math.random() * 2.0;
break;
case 3:
left -= step * aspect_ratio + Math.random() * 2.0;
break;
case 0:
top += step + Math.random() * 2.0;
break;
}
} else { // 默认设置:椭圆螺旋形状
radius += step;
angle += (index % 2 === 0 ? 1 : -1) * step;
left = options.center.x - (width / 2.0) + (radius * Math.cos(angle)) * aspect_ratio;
top = options.center.y + radius * Math.sin(angle) - (height / 2.0);
}
word_style.left = left + "px";
word_style.top = top + "px";
}
// 不呈现词如果外面将容器的一部分
if (options.removeOverflowing && (left < 0 || top < 0 || (left + width) > options.width || (top + height) > options.height)) {
word_span.remove()
return;
}
already_placed_words.push(word_span[0]);
// 如果现有调用回调
if ($.isFunction(word.afterWordRender)) {
word.afterWordRender.call(word_span);
}
};
var drawOneWordDelayed = function(index) {
index = index || 0;
if (!$this.is(':visible')) { // 如果不可见，那么不要试图拉
setTimeout(function() {
drawOneWordDelayed(index);
}, 10);
return;
}
if (index < word_array.length) {
drawOneWord(index, word_array[index]);
setTimeout(function() {
drawOneWordDelayed(index + 1);
}, 10);
} else {
if ($.isFunction(options.afterCloudRender)) {
options.afterCloudRender.call($this);
}
}
};
// 迭代drawOneWord上每一个字。迭代的方式完成取决于绘图模式(delayedMode是真或假的)
if (options.delayedMode) {
drawOneWordDelayed();
} else {
$.each(word_array, drawOneWord);
if ($.isFunction(options.afterCloudRender)) {
options.afterCloudRender.call($this);
}
}
};
// 延迟执行,以便在浏览器可以渲染云画推算的强化词前的页面
setTimeout(function() {
drawWordCloud();
}, 10);
return $this;
};
})(jQuery);
html
css
.mark_list {
margin-top: 5px;
width:100%;
height: 180px;
}
@media screen and (max-width: 350px) {
.mark_list {
margin-top: 5px;
width:100%;
height: 120px;
}
}
@media screen and (min-width: 750px) {
.mark_list {
margin-top:5px;
width:100%;
height: 280px;
}
}
div.jqcloud {
font-family: "微软雅黑", "微软雅黑", sans-serif;
font-size: 10px;
line-height: normal;
}
div.jqcloud a {
font-size: inherit;
text-decoration: none;
}
div.jqcloud span.w10 { font-size: 400%; }
div.jqcloud span.w9 { font-size: 360%; }
div.jqcloud span.w8 { font-size: 350%; }
div.jqcloud span.w7 { font-size: 240%; }
div.jqcloud span.w6 { font-size: 210%; }
div.jqcloud span.w5 { font-size: 190%; }
div.jqcloud span.w4 { font-size: 170%; }
div.jqcloud span.w3 { font-size: 150%; }
div.jqcloud span.w2 { font-size: 130%; }
div.jqcloud span.w1 { font-size: 110%; }
/* colors */
div.jqcloud { color: #09f; }
div.jqcloud a { color: inherit; }
/* div.jqcloud span:hover { color: red; font-size: 40px; font-weight: bold;} */
div.jqcloud span.w10 { color: #0cf; }
div.jqcloud span.w9 { color: #0cf; }
div.jqcloud span.w8 { color: #0cf; }
div.jqcloud span.w7 { color: #39d; }
div.jqcloud span.w6 { color: #90c5f0; }
div.jqcloud span.w5 { color: #90a0dd; }
div.jqcloud span.w4 { color: #90c5f0; }
div.jqcloud span.w3 { color: #a0ddff; }
div.jqcloud span.w2 { color: #99ccee; }
div.jqcloud span.w1 { color: #aab5f0; }
/* layout */
div.jqcloud {
overflow: hidden;
position: relative;
}
div.jqcloud span { padding: 0; }
js
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]+"
曝光数"+item[1]+"
"+item[2];
$("#my_favorite_latin_words").after("" + html + "");
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();
}
ng动态获取数据
$http.post(。。。。。。)
.success(function (resuser) {
if (resuser.status == "00000") {
if (resuser.data) {
$scope.labelList = resuser.data;
} else {
$scope.labelList = [
{
ID: "1",
LABEL_COUNT: 1,
LABEL_NAME: "温柔",
LABEL_TYPE: "1"
},
{
ID: "2",
LABEL_COUNT: 1,
LABEL_NAME: "亲切",
LABEL_TYPE: "1"
},
{
ID: "3",
LABEL_COUNT: 1,
LABEL_NAME: "热情",
LABEL_TYPE: "1"
},
];
}
var string_ = "";
for (var i = 0; i < $scope.labelList.length; i++) {
var string_f = $scope.labelList[i].LABEL_NAME;
var string_n = $scope.labelList[i].LABEL_COUNT;
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 + "]");
$("#myCard").css("display", "block");
$("#mark_list").jQCloud(word_list);
$loadingToast.fadeOut(100);
}
})