簡要教程

svg3dtagcloud.js是一款基于HTML5?SVG的3D標(biāo)簽云jQuery插件。該3D標(biāo)簽云插件不需要額外的CSS樣式，可使用鼠標(biāo)與標(biāo)簽進(jìn)行互動(dòng)，并提供很多參數(shù)來控制標(biāo)簽云的外觀。

?使用方法

使用該3D標(biāo)簽云插件需要引入jQuery和jquery.svg3dtagcloud.min.js文件。

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

HTML結(jié)構(gòu)

可以使用一個(gè)

容器來作為該3D標(biāo)簽云的包裹容器

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

初始化插件

首先你需要設(shè)置一個(gè)對(duì)象數(shù)組遍歷，數(shù)組中包含你需要制作的標(biāo)簽和它們對(duì)應(yīng)的鏈接地址。

var entries = [ 
                { label: 'CodePen', url: 'http://codepen.io/', target: '_top' },
                { label: 'three.js', url: 'http://threejs.org/', target: '_top' },
                { label: 'JS Compress', url: 'http://jscompress.com/', target: '_top' },
                { label: 'TinyPNG', url: 'https://tinypng.com/', target: '_top' },
                { label: 'Can I Use', url: 'http://caniuse.com/', target: '_top' },
                { label: 'URL shortener', url: 'https://goo.gl/', target: '_top' },
                { label: 'Twitter', url: 'https://twitter.com/', target: '_top' },
                { label: 'Gulp', url: 'http://gulpjs.com/', target: '_top' },
                { label: 'Browsersync', url: 'https://www.browsersync.io/', target: '_top' },
                { label: 'GitHub', url: 'https://github.com/', target: '_top' },
                { label: 'Shadertoy', url: 'https://www.shadertoy.com/', target: '_top' },
                { label: 'jsPerf', url: 'http://jsperf.com/', target: '_top' },
                { label: 'Foundation', url: 'http://foundation.zurb.com/', target: '_top' },
                { label: 'CreateJS', url: 'http://createjs.com/', target: '_top' },
                { label: 'Velocity.js', url: 'http://julian.com/research/velocity/', target: '_top' },
                { label: 'jQuery', url: 'https://jquery.com/', target: '_top' },
            ];

然后可以通過下面的方法來初始化該3D標(biāo)簽云插件。

$( '#tag-cloud' ).svg3DTagCloud( {entries: entries} );

配置參數(shù)

svg3dtagcloud.js插件的可用配置參數(shù)有：

entries：一個(gè)對(duì)象數(shù)組，用于初始化標(biāo)簽。

width：標(biāo)簽云的寬度。

height：標(biāo)簽云的高度。

radius：標(biāo)簽云的半徑。

radiusMin：標(biāo)簽云的最小半徑。

bgDraw：是否使用背景色。

bgColor：背景顏色。

opacityOver：鼠標(biāo)滑過標(biāo)簽時(shí)的標(biāo)簽透明度。

opacityOut：鼠標(biāo)離開標(biāo)簽時(shí)的標(biāo)簽透明度。

opacitySpeed：標(biāo)簽透明度過渡速度。

fov：how the content is presented。

speed：標(biāo)簽云動(dòng)畫的速度。

fontFamily：標(biāo)簽云的字體。

fontSize：標(biāo)簽云的字體大小。

fontColor：標(biāo)簽云的字體顏色。

fontWeight：標(biāo)簽云的字體的fontWeight。

fontStyle：標(biāo)簽云的字體樣式。

fontStretch：標(biāo)簽云的字體的fontStretch。

fontToUpperCase：是否轉(zhuǎn)換為大寫字體。

以上就是基于HTML5 SVG可互動(dòng)的3D標(biāo)簽云jQuery插件的內(nèi)容，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)（www.miracleart.cn）！