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

初始化插件

首先你需要設(shè)定一個(gè)物件陣列遍歷，陣列中包含你需要製作的標(biāo)籤和它們對應(yīng)的連結(jié)位址。

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)籤雲(yún)插件。

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

配置參數(shù)

svg3dtagcloud.js插件的可用設(shè)定參數(shù)有：

• entries：一個(gè)物件數(shù)組，用於初始化標(biāo)籤。

• width：標(biāo)籤雲(yún)的寬度。

• height：標(biāo)籤雲(yún)的高度。

• radius：標(biāo)籤雲(yún)的半徑。

• radiusMin：標(biāo)籤雲(yún)的最小半徑。

• bgDraw：是否使用背景色。

• bgColor：背景顏色。

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

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

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

• fov：how the content is presented。

• speed：標(biāo)籤雲(yún)動畫的速度。

• fontFamily：標(biāo)籤雲(yún)的字體。

• fontSize：標(biāo)籤雲(yún)的字體大小。

• fontColor：標(biāo)籤雲(yún)的字體顏色。

• fontWeight：標(biāo)籤雲(yún)的字體的fontWeight。

• fontStyle：標(biāo)籤雲(yún)的字體樣式。

• fontStretch：標(biāo)籤雲(yún)的字體的fontStretch。

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

以上就是基於HTML5 SVG可互動的3D標(biāo)籤雲(yún)jQuery插件的內(nèi)容，更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)（m.miracleart.cn）！