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

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

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

### 添加代码 使用该3D标签云插件需要引入jQuery和jquery.svg3dtagcloud.min.js文件。 ``` ```

可以使用一个<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 );

成功!





原文地址:http://qianxunclub.com/ji-yu-html5-svgke-hu-dong-de-3dbiao-qian-yun-jquerycha-jian/
本文由 千寻啊千寻创作。可自由转载、引用,但需署名作者且注明文章出处。

上一篇 :   SpringMVC集成shiro权限(附源码)

下一篇 :   linux生成SSH Keys

热门评论