簡短教學
svg3dtagcloud.js是一款基於HTML5 SVG的3D標籤雲端jQuery外掛程式。此3D標籤雲端外掛程式不需要額外的CSS樣式，可使用滑鼠與標籤互動，並提供許多參數來控制標籤雲的外觀。
使用方法
使用該3D標籤雲插件需要引入jQuery和jquery.svg3dtagcloud.min.js檔案。
HTML結構
可以使用一個
初始化插件
首先你需要設定一個物件陣列遍歷，陣列中包含你需要製作的標籤和它們對應的連結位址。
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標籤雲插件。
$( '#tag-cloud' ).svg3DTagCloud( {entries: entries} );
配置參數
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：是否轉換為大寫字體。
以上就是基於HTML5 SVG可互動的3D標籤雲jQuery插件的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！
