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

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 );

成功！