基於HTML5 SVG可互動的3D標籤雲端jQuery插件-H5教程-PHP中文網

基於HTML5 SVG可互動的3D標籤雲端jQuery插件

黄舟

發布： 2017-01-19 13:58:36

原創

1401 人瀏覽過

簡短教學

svg3dtagcloud.js是一款基於HTML5 SVG的3D標籤雲端jQuery外掛程式。此3D標籤雲端外掛程式不需要額外的CSS樣式，可使用滑鼠與標籤互動，並提供許多參數來控制標籤雲的外觀。

使用方法

使用該3D標籤雲插件需要引入jQuery和jquery.svg3dtagcloud.min.js檔案。

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

登入後複製

HTML結構

可以使用一個

容器來作為該3D標籤雲的包裹容器。

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

登入後複製

初始化插件

首先你需要設定一個物件陣列遍歷，陣列中包含你需要製作的標籤和它們對應的連結位址。

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

登入後複製

然後可以透過下面的方法來初始化該3D標籤雲插件。

$( &#39;#tag-cloud&#39; ).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中文網（www.php.cn）！