基于HTML5 SVG可互动的3D标签云jQuery插件

来源：互联网发布：环保行业知乎编辑：程序博客网时间：2024/06/01 09:15

svg3dtagcloud.js是一款基于HTML5 SVG的3D标签云jQuery插件。该3D标签云插件不需要额外的CSS样式，可使用鼠标与标签进行互动，并提供很多参数来控制标签云的外观。

效果演示：http://qianxunclub.com

添加代码

使用该3D标签云插件需要引入jQuery和jquery.svg3dtagcloud.min.js文件。

<script src="js/jquery.min.js"></script><script src="js/jquery.svg3dtagcloud.min.js"></script>

可以使用一个<div>容器来作为该3D标签云的包裹容器。

<div id="tag-cloud"></div>

初始化插件

var entries = [             { label: '千寻博客', url: 'http://qianxunclub.com', target: '_Blank' },            { label: '千寻博客', url: 'http://qianxunclub.com', target: '_Blank' },            { label: '千寻博客', url: 'http://qianxunclub.com', target: '_Blank' },            { label: '千寻博客', url: 'http://qianxunclub.com', target: '_Blank' },            { label: '千寻博客', url: 'http://qianxunclub.com', target: '_Blank' }        ];

然后可以通过下面的方法来初始化该3D标签云插件。

var settings = {    entries: entries,    width: 640,    height: 480,    radius: '65%',    radiusMin: 75,    bgDraw: false,    opacityOver: 1.00,    opacityOut: 0.05,    opacitySpeed: 6,    fov: 800,    speed: 0.5,    fontFamily: 'Oswald, Arial, sans-serif',    fontSize: '15',    fontColor: '#009688',    fontWeight: 'normal',    fontStyle: 'normal',    fontStretch: 'normal',    fontToUpperCase: true};$( '#tag-cloud' ).svg3DTagCloud( settings );

配置参数

svg3dtagcloud.js插件的可用配置参数有：

entries：一个对象数组，用于初始化标签。width：标签云的宽度。height：标签云的高度。radius：标签云的半径。radiusMin：标签云的最小半径。bgDraw：是否使用背景色。bgColor：背景颜色。opacityOver：鼠标滑过标签时的标签透明度。opacityOut：鼠标离开标签时的标签透明度。opacitySpeed：标签透明度过渡速度。fov：how the content is presented。speed：标签云动画的速度。fontFamily：标签云的字体。fontSize：标签云的字体大小。fontColor：标签云的字体颜色。fontWeight：标签云的字体的fontWeight。fontStyle：标签云的字体样式。fontStretch：标签云的字体的fontStretch。fontToUpperCase：是否转换为大写字体。

下载

svg3dtagcloud.min.js下载地址：http://qianxunclub.com/assets/js/svg3dtagcloud.min.js

Ghost使用方式

上满的准备工作完成后，就可以在Ghost上面使用了，
在需要添加标签云的地址先获取所有的标签：

//生命一个储蓄标签的数组<script>var word_array = [];//获取所有的标签</script>{{#get "tags" limit="all" include="count.posts" order="count.posts desc"}}            {{#foreach tags}}                <script>                    //把标签储存到数组里面                    word_array.push({label: "{{name}}",target:"_Blank",url:"/tag/{{slug}}"})                </script>            {{/foreach}}{{/get}}

上面获取到Ghost标签后，然后使用上面的方法来展示：

var settings = {    entries: word_array,//这个就是上面获取到的数组    width: 640,    height: 480,    radius: '65%',    radiusMin: 75,    bgDraw: false,    opacityOver: 1.00,    opacityOut: 0.05,    opacitySpeed: 6,    fov: 800,    speed: 0.5,    fontFamily: 'Oswald, Arial, sans-serif',    fontSize: '15',    fontColor: '#009688',    fontWeight: 'normal',    fontStyle: 'normal',    fontStretch: 'normal',    fontToUpperCase: true};$( '#tag-cloud' ).svg3DTagCloud( settings );

成功！

0 0