tagcloud.js
window.tagcloud = (function (d, a) {
function b(e) {
return Object.prototype.toString.call(e) === "[object Object]"
}
function c(g) {
var h = this;
h.config = c._getConfig(g);
h.box = h.config.element;
h.fontsize = h.config.fontsize;
h.radius = h.config.radius;
// h.depth = 2 * h.radius;
// h.size = 2 * h.radius;
h.depth = 1 * h.radius;
h.size = 1 * h.radius;
h.mspeed = c._getMsSpeed(h.config.mspeed);
h.ispeed = c._getIsSpeed(h.config.ispeed);
h.items = h._getItems();
h.direction = h.config.direction;
h.keep = h.config.keep;
h.active = false;
h.lasta = 1;
h.lastb = 1;
h.mouseX0 = h.ispeed * Math.sin(h.direction * Math.PI / 180);
h.mouseY0 = -h.ispeed * Math.cos(h.direction * Math.PI / 180);
h.mouseX = h.mouseX0;
h.mouseY = h.mouseY0;
h.index = -1;
c._on(h.box, "mouseover", function () {
h.active = true
});
c._on(h.box, "mouseout", function () {
h.active = false
});
c._on(h.keep ? d : h.box, "mousemove", function (j) {
var k = d.event || j;
var i = h.box.getBoundingClientRect();
h.mouseX = (k.clientX - (i.left + h.box.offsetWidth / 2)) / 5;
h.mouseY = (k.clientY - (i.top + h.box.offsetHeight / 2)) / 5
});
for (var e = 0, f = h.items.length; e < f; e++) {
h.items[e].element.index = e;
h.items[e].element.onmouseover = function () {
h.index = this.index
};
h.items[e].element.onmouseout = function () {
h.index = -1
}
}
c.boxs.push(h.box);
h.update(h);
h.box.style.visibility = "visible";
h.box.style.position = "relative";
h.box.style.minHeight = 1 * h.size + "px";
h.box.style.minWidth = 1 * h.size + "px";
// h.box.style.minHeight = 1.2 * h.size + "px";
// h.box.style.minWidth = 2.5 * h.size + "px";
for (var e = 0, f = h.items.length; e < f; e++) {
h.items[e].element.style.position = "absolute";
h.items[e].element.style.zIndex = e + 1
}
h.up = setInterval(function () {
h.update(h)
}, 30)
}
c.boxs = [];
c._set = function (e) {
if (c.boxs.indexOf(e) == -1) {
return true
}
};
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function (e) {
var g = this.length >>> 0;
var f = Number(arguments[1]) || 0;
f = (f < 0) ? Math.ceil(f) : Math.floor(f);
if (f < 0) {
f += g
}
for (; f < g; f++) {
if (f in this && this[f] === e) {
return f
}
}
return -1
}
}
c._getConfig = function (e) {
var f = {fontsize: 16, radius: 60, mspeed: "normal", ispeed: "normal", direction: 135, keep: true};
if (b(e)) {
for (var g in e) {
if (e.hasOwnProperty(g)) {
f[g] = e[g]
}
}
}
return f
};
c._getMsSpeed = function (e) {
var f = {slow: 1.5, normal: 3, fast: 5};
return f[e] || 3
};
c._getIsSpeed = function (e) {
var f = {slow: 10, normal: 25, fast: 50};
return f[e] || 25
};
c._getSc = function (e, f) {
var g = Math.PI / 180;
return [Math.sin(e * g), Math.cos(e * g), Math.sin(f * g), Math.cos(f * g)]
};
c._on = function (f, g, h, e) {
if (f.addEventListener) {
f.addEventListener(g, h, e)
} else {
if (f.attachEvent) {
f.attachEvent("on" + g, h)
} else {
f["on" + g] = h
}
}
};
c.prototype = {
constructor: c, update: function () {
var r = this, e, f;
if (!r.active && !r.keep) {
r.mouseX = Math.abs(r.mouseX - r.mouseX0) < 1 ? r.mouseX0 : (r.mouseX + r.mouseX0) / 2;
r.mouseY = Math.abs(r.mouseY - r.mouseY0) < 1 ? r.mouseY0 : (r.mouseY + r.mouseY0) / 2
}
e = -(Math.min(Math.max(-r.mouseY, -r.size), r.size) / r.radius) * r.mspeed;
f = (Math.min(Math.max(-r.mouseX, -r.size), r.size) / r.radius) * r.mspeed;
if (Math.abs(e) <= 0.01 && Math.abs(f) <= 0.01) {
return
}
r.lasta = e;
r.lastb = f;
var q = c._getSc(e, f);
for (var g = 0, h = r.items.length; g < h; g++) {
var k = r.items[g].x, m = r.items[g].y * q[1] + r.items[g].z * (-q[0]),
o = r.items[g].y * q[0] + r.items[g].z * q[1];
var l = k * q[3] + o * q[2], n = m, p = o * q[3] - k * q[2];
if (r.index == g) {
r.items[g].scale = 1;
r.items[g].fontsize = 16;
r.items[g].alpha = 1;
r.items[g].element.style.zIndex = 99
} else {
var i = r.depth / (r.depth + p);
r.items[g].x = l;
r.items[g].y = n;
r.items[g].z = p;
r.items[g].scale = i;
r.items[g].fontsize = Math.ceil(i * 2) + r.fontsize - 6;
r.items[g].alpha = 1.5 * i - 0.5;
r.items[g].element.style.zIndex = Math.ceil(i * 10 - 5)
}
r.items[g].element.style.fontSize = r.items[g].fontsize + "px";
r.items[g].element.style.left = r.items[g].x * 3 + ((r.box.offsetWidth*3/4) - r.items[g].offsetWidth) / 2 + "px";
r.items[g].element.style.top = r.items[g].y/2 + ((r.box.offsetHeight / 3 * 2) - r.items[g].offsetHeight) / 2 + "px";
r.items[g].element.style.filter = "alpha(opacity=" + 100 * r.items[g].alpha + ")";
r.items[g].element.style.opacity = r.items[g].alpha
}
}, _getItems: function () {
var k = this, h = [], e = k.box.children, j = e.length, g;
for (var f = 0; f < j; f++) {
g = {};
g.angle = {};
g.angle.phi = Math.acos(-1 + (2 * f + 1) / j);
g.angle.theta = Math.sqrt((j + 1) * Math.PI) * g.angle.phi;
g.element = e[f];
g.offsetWidth = g.element.offsetWidth;
g.offsetHeight = g.element.offsetHeight;
// g.x = k.radius * 1.5 * Math.cos(g.angle.theta) * Math.sin(g.angle.phi);
// g.y = k.radius * 1.5 * Math.sin(g.angle.theta) * Math.sin(g.angle.phi);
// g.z = k.radius * 1.5 * Math.cos(g.angle.phi);
g.x = k.radius * Math.cos(g.angle.theta) * Math.sin(g.angle.phi);
g.y = k.radius * Math.sin(g.angle.theta) * Math.sin(g.angle.phi);
g.z = k.radius * Math.cos(g.angle.phi);
g.element.style.left = g.x + (k.box.offsetWidth/3*2 - g.offsetWidth) / 2 + "px";
g.element.style.top = g.y + (k.box.offsetHeight/3*2 - g.offsetHeight) / 2 + "px";
h.push(g)
}
return h
}
};
if (!a.querySelectorAll) {
a.querySelectorAll = function (g) {
var h = a.createElement("style"), f = [], e;
a.documentElement.firstChild.appendChild(h);
a._qsa = [];
h.styleSheet.cssText = g + "{x-qsa:expression(document._qsa && document._qsa.push(this))}";
window.scrollBy(0, 0);
h.parentNode.removeChild(h);
while (a._qsa.length) {
e = a._qsa.shift();
e.style.removeAttribute("x-qsa");
f.push(e)
}
a._qsa = null;
return f
}
}
return function (i) {
i = i || {};
var j = i.selector || ".tagcloud", e = a.querySelectorAll(j), g = [];
for (var f = 0, h = e.length; f < h; f++) {
i.element = e[f];
if (!!c._set(i.element)) {
g.push(new c(i))
}
}
return g
}
})(window, document);
使用方法：
dom结构
调用方式
nextTick(() => {
tagcloud({
selector: '.comment_list',
/*元素选择器*/
fontsize: 16,
/*基本字体大小, 单位px*/
radius: 80, //80
/*滚动半径, 单位px*/
mspeed: 'normal',
/*滚动最大速度, 取值: slow, normal(默认), fast*/
ispeed: 'normal',
/*滚动初速度, 取值: slow, normal(默认), fast*/
direction: 135,
/*初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...*/
keep: false /*鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动*/,
});
});
呈现效果
截屏2023-05-25 下午4.10.22.png
{{ item.content }} {{ item.support }}