簡要教程
svg3dtagcloud.js是一款基于HTML5 SVG的3D標簽云jQuery插件。該3D標簽云插件不需要額外的CSS樣式，可使用鼠標與標簽進行互動，并提供很多參數來控制標簽云的外觀。
使用方法
使用該3D標簽云插件需要引入jQuery和jquery.svg3dtagcloud.min.js文件。
HTML結構
可以使用一個
容器來作為該3D標簽云的包裹容器。
初始化插件
首先你需要設置一個對象數組遍歷，數組中包含你需要制作的標簽和它們對應的鏈接地址。
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：是否轉換為大寫字體。
來源：http://www.htmleaf.com/html5/SVG/201602253145.html
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。