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

成功！

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

[HTML5]3D标签云
index.html <html> <head> <meta http-equiv="Content-Type" content="text ...
html5 popup,popup.js-jQuery和CSS3可互动的3D弹出窗口插件
popup.js是一款使用jQuery和CSS3制作并可以使用鼠标进行互动的3D弹出窗口插件.该3D弹出窗口插件使用简单,并且在旧的浏览器中会回退为非3D状态,兼容IE8+的所有现代浏览器. 使用方法 ...
基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
3D标签云效果的实现
一．关于3D标签云 TagCloudView是一个完全基于Android ViewGroup编写的控件,支持将一组View展示为一个3D标签云,并支持全方向滚动. GitHub中的链接地址:https ...
html5 背景 svg,HTML5 SVG生成图案花纹背景样式的js插件
Textures.js是一款非常实用的HTML5 SVG生成图案花纹背景样式的js插件.该js图案花纹背景插件基于d3.js,可以生成各种SVG图案花纹背景.这些图案包括各种线条.圆点.网格等,你甚至 ...
基于激光雷达的里程计及3D点云地图中的定位方法
本文转载自公众号@点云PCL,基于激光雷达的里程计及3D点云地图中的定位方法 :https://mp.weixin.qq.com/s/laA1YAPBCpqlzdGi0yb2cQ 论文:LOL: Li ...
php项目网页音乐播放器插件,基于HTML5 canvas和Web Audio的音频播放器插件
wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件.通过wavesurfer.js你可以使用它来制作各种HTML5音频播放器,它可以在各种支持 Web A ...
3D标签云的简单实现
3D标签云的实现最近在做一些小Demo,看到了3D标签云觉得很酷炫,就学着做了一下.虽然看起来有点难,但是分解了看其实还是很普通的js运动的实现. 效果预览https://chestnut647.g ...
css标签3d,超酷的js+css3实现的3D标签云特效
此作品是一款超酷的3D标签云核心功能代码如下: function doPosition(){ var l = oDiv.offsetWidth / 2; var t = oDiv.offsetHei ...