标签云TagCloud

1. 使用:引入JQuery->引入.min文件->在相应代码中使用下面配置

/*** 标签云*/tagCloud(){const that=this$( document ).ready( function() {let settings = {entries: that.tagData,width: 956,height: 280,radius: 200,radiusMin: 200,bgDraw: true,bgColor: 'transparent',opacityOver: 1.00,opacityOut: 0.05,opacitySpeed: 6,fov: 500,speed: 0.6,fontFamily: 'Source Han Sans CN',fontSize: '20',fontColor: 'url(#g3)',fontWeight: 'normal',//boldfontStyle: 'normal',//italicfontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expandedfontToUpperCase: false};// var svg3DTagCloud = new SVG3DTagCloud( document.getElementById( 'holder'  ), settings );$('#tag-cloud').svg3DTagCloud(settings);})}

2.文件 jquery.svg3dtagcloud.min.js

!function () {function t(t, e) {function n() {A = document.createElementNS(E, "svg"),// A.addEventListener("mousemove", v),A.innerHTML=`<defs><linearGradient id="g3" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#FFAA06"></stop><stop offset="100%" stop-color="#FFFFFF"></stop></linearGradient></defs>`;t.appendChild(A),p.bgDraw && (P = document.createElementNS(E, "rect"), P.setAttribute("x", 0), P.setAttribute("y", 0), P.setAttribute("fill", p.bgColor), A.appendChild(P)), a(), i(), d(), window.addEventListener("resize", y)}function i() {var e = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,n = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight, i = e,r = n;p.width.toString().indexOf("%") > 0 || p.height.toString().indexOf("%") > 0 ? (i = Math.round(t.offsetWidth / 100 * parseInt(p.width)), r = Math.round(i / 100 * parseInt(p.height))) : (i = parseInt(p.width), r = parseInt(p.height)), i >= e && (i = e), r >= n && (r = n), b = {x: i / 2,y: r / 2}, O.x = p.speed / b.x, O.y = p.speed / b.y, w = i >= r ? r / 100 * parseInt(p.radius) : i / 100 * parseInt(p.radius), 1 > w && (w = 1), x = w / 2, x < p.radiusMin && (x = p.radiusMin, w = 2 * x), A.setAttribute("width", i), A.setAttribute("height", r), p.bgDraw && (P.setAttribute("width", i), P.setAttribute("height", r)), o(x)}function o(t) {for (var e = 0, n = S.length; n > e; e++) r(S[e], t)}function r(t, e) {var n = t.vectorPosition.x - C.x, i = t.vectorPosition.y - C.y, o = t.vectorPosition.z - C.z,r = Math.sqrt(n * n + i * i + o * o);t.vectorPosition.x /= r, t.vectorPosition.y /= r, t.vectorPosition.z /= r, t.vectorPosition.x *= e, t.vectorPosition.y *= e, t.vectorPosition.z *= e}function s(t, e, n, i, o) {var r = {};return r.element = document.createElementNS(E, "text"), r.element.setAttribute("x", 0), r.element.setAttribute("y", 0), r.element.setAttribute("fill", p.fontColor), r.element.setAttribute("font-family", p.fontFamily), r.element.setAttribute("font-size", p.fontSize), r.element.setAttribute("font-weight", p.fontWeight), r.element.setAttribute("font-style", p.fontStyle), r.element.setAttribute("font-stretch", p.fontStretch), r.element.setAttribute("text-anchor", "middle"), r.element.textContent = p.fontToUpperCase ? e.label.toUpperCase() : e.label, r.link = document.createElementNS(E, "a"), r.link.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", e.url), r.link.setAttribute("target", e.target), r.link.addEventListener("mouseover", f, !0), r.link.addEventListener("mouseout", h, !0), r.link.appendChild(r.element), r.index = t, r.mouseOver = !1, r.vectorPosition = {x: n,y: i,z: o}, r.vector2D = {x: 0, y: 0}, A.appendChild(r.link), r}function a() {for (var t = 1, e = p.entries.length + 1; e > t; t++) {var n = Math.acos(-1 + (2 * t - 1) / e), i = Math.sqrt(e * Math.PI) * n, o = Math.cos(i) * Math.sin(n),r = Math.sin(i) * Math.sin(n), a = Math.cos(n), u = s(t - 1, p.entries[t - 1], o, r, a);S.push(u)}}function u(t) {for (var e = 0, n = S.length; n > e; e++) {var i = S[e];if (i.element.getAttribute("x") === t.getAttribute("x") && i.element.getAttribute("y") === t.getAttribute("y")) return i}}function c(t) {for (var e = u(t), n = 0, i = S.length; i > n; n++) {var o = S[n];o.index === e.index ? o.mouseOver = !0 : o.mouseOver = !1}}function l() {var t = O.x * z.x - p.speed, e = p.speed - O.y * z.y, n = t * k, i = e * k;D.sx = Math.sin(n), D.cx = Math.cos(n), D.sy = Math.sin(i), D.cy = Math.cos(i);for (var o = 0, r = S.length; r > o; o++) {var s = S[o];if (M) {var a = s.vectorPosition.x, u = s.vectorPosition.y * D.sy + s.vectorPosition.z * D.cy;s.vectorPosition.x = a * D.cx + u * D.sx, s.vectorPosition.y = s.vectorPosition.y * D.cy + s.vectorPosition.z * -D.sy, s.vectorPosition.z = a * -D.sx + u * D.cx}var c = p.fov / (p.fov + s.vectorPosition.z);s.vector2D.x = s.vectorPosition.x * c + b.x, s.vector2D.y = s.vectorPosition.y * c + b.y, s.element.setAttribute("x", s.vector2D.x), s.element.setAttribute("y", 120 * c);var l;M ? (l = (x - s.vectorPosition.z) / w, l < p.opacityOut && (l = p.opacityOut)) : (l = parseFloat(s.element.getAttribute("opacity")), l += s.mouseOver ? (p.opacityOver - l) / p.opacitySpeed : (p.opacityOut - l) / p.opacitySpeed), s.element.setAttribute("opacity", l)}S = S.sort(function (t, e) {return e.vectorPosition.z - t.vectorPosition.z})}function d() {requestAnimFrame(d), l()}function f(t) {M = !1, c(t.target)}function h(t) {M = !0}function v(t) {z = m(A, t)}function m(t, e) {var n = t.getBoundingClientRect();return {x: e.clientX - n.left, y: e.clientY - n.top}}function y(t) {i()}var p = {entries: [],width: 480,height: 480,radius: "70%",radiusMin: 75,bgDraw: !0,bgColor: "transparent",opacityOver: 1,opacityOut: .05,opacitySpeed: 6,fov: 800,speed: 2,fontFamily: "Arial, sans-serif",fontSize: "15",fontColor: "#g3",fontWeight: "normal",fontStyle: "normal",fontStretch: "normal",fontToUpperCase: !1};if (void 0 !== e) for (var g in e) e.hasOwnProperty(g) && p.hasOwnProperty(g) && (p[g] = e[g]);if (!p.entries.length) return !1;var x, w, b, A, P, S = [], M = !0, z = {x: 0, y: 0}, C = {x: 0, y: 0, z: 0}, O = {x: 0, y: 0},D = {sx: 0, cx: 0, sy: 0, cy: 0}, k = Math.PI / 180, E = "http://www.w3.org/2000/svg";window.requestAnimFrame = function () {return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (t) {window.setTimeout(t, 1e3 / 60)}}(), n()}window.SVG3DTagCloud = t
}(), "undefined" != typeof jQuery && !function (t) {t.fn.svg3DTagCloud = function (e) {return this.each(function () {t.data(this, "plugin_SVG3DTagCloud") || t.data(this, "plugin_SVG3DTagCloud", new SVG3DTagCloud(this, e))})}
}(jQuery);

标签云TagCloud相关推荐

java 标签云_网站标签云(TagCloud)的实现
周末闲来没事,就给网站实现了一个标签云(TagCloud)功能,我的网站3D标签云实现了15个网站文章热词,且根据算法得出权重分大小显示.前端实现通过TagCanvas的3D样式标签实现js,TagC ...
标签云 tagCloud 简单实现原理（还算好看）
实现原理很简单,可做优化. 原理就是在一个区域内放第一个字(矩形),然后记录他的4个点(左上左下右上右下),入队列,,然后放下一个的时候,在队列取出一个点,然后第二个矩形根据这个点就有4种摆法,有些摆 ...
php tagcloud,WordPress函数:wp_tag_cloud(标签云)详解和举例
wp_tag_cloud() 函数的作用是用来标签云的,可以根据每个标签所关联的文章次数来定义字体大小.标签排序等属性.从 2.8 版本开始,添加了分类法(taxonomy)参数,这就意味着,除了 ...
python 标签云_标签云算法Python实现
标签云(Tag Cloud)常见于各种博客站点中,标签有利于网站内容分类,还可以用于相关性内容推荐.近日笔者有空把个人的开源博客Django_blog添加了一个新功能--标签云.最终效果请访问:htt ...
[html] 写一个标签云的布局
[html] 写一个标签云的布局 <ul class="tag-cloud"><li>JavaScript</li><li>技术&l ...
添加分类、标签云（球状）、彩色标签
添加分类页面 1.新建页面 $ cd your-hexo-site $ hexo new page categories 在终端窗口下,定位到 Hexo 站点目录下.使用 hexo new page ...
Hexo Butterfly 主题功能拓展 - 标签云云养猫
记录一下正在使用的两款Hexo插件效果请看这里~ TaQini Hexo-Tag-Cloud Hexo 标签云插件:官方文档安装流程进入到 hexo 的根目录,然后在 package.json ...
（翻译）标签云（Tag Cloud）
问题概述用户想以可视化的方式来浏览不同人气的内容[1]. 示例用途用于当网站用户可以自行添加内容和标签时: 用于当网站中的标签数量超过10~20个时,标签具有的权值与其被引用的次数相关[2] ...
WordPress标签云小工具详解
WordPress标签云小工具是WordPress程序自带的一个小工具,它可以在我们的博客侧边栏展示网站的标签列表.今天WordPress小工具详解系列就从WordPress标签云小工具开始.带大家熟 ...

标签云TagCloud

标签云TagCloud相关推荐

最新文章

热门文章