首頁 web前端 H5教程 基于HTML5 SVG可互动的3D标签云jQuery插件

基于HTML5 SVG可互动的3D标签云jQuery插件

Mar 30, 2017 pm 05:47 PM

简要教程

svg3dtagcloud.js是一款基于HTML5 SVG的3D标签云jQuery插件。该3D标签云插件不需要额外的CSS样式,可使用鼠标与标签进行互动,并提供很多参数来控制标签云的外观。

 使用方法

使用该3D标签云插件需要引入jQuery和jquery.svg3dtagcloud.min.js文件。

1

2

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

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

登入後複製

HTML结构

可以使用一个<p>容器来作为该3D标签云的包裹容器

1

&lt;p id=&quot;tag-cloud&quot;&gt;&lt;/p&gt;

登入後複製

初始化插件

首先你需要设置一个对象数组遍历,数组中包含你需要制作的标签和它们对应的链接地址。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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标签云插件。

1

$( &#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)!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

兩個點博物館:邦格荒地地點指南
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

兩個點博物館:邦格荒地地點指南
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

聊聊如何利用 SVG 實現圖片馬賽克效果 聊聊如何利用 SVG 實現圖片馬賽克效果 Sep 01, 2022 am 11:05 AM

聊聊如何利用 SVG 實現圖片馬賽克效果

svg怎麼轉jpg格式 svg怎麼轉jpg格式 Nov 24, 2023 am 09:50 AM

svg怎麼轉jpg格式

深入淺析vue3+vite中怎麼使用svg圖標 深入淺析vue3+vite中怎麼使用svg圖標 Apr 28, 2022 am 10:48 AM

深入淺析vue3+vite中怎麼使用svg圖標

VUE3入門教學:使用Vue.js外掛程式玩SVG VUE3入門教學:使用Vue.js外掛程式玩SVG Jun 16, 2023 am 09:48 AM

VUE3入門教學:使用Vue.js外掛程式玩SVG

詳解用SVG為 favicon 新增標識 詳解用SVG為 favicon 新增標識 Sep 07, 2022 am 10:30 AM

詳解用SVG為 favicon 新增標識

vue3+vue-cli4中怎麼使用svg vue3+vue-cli4中怎麼使用svg May 11, 2023 pm 05:58 PM

vue3+vue-cli4中怎麼使用svg

在HTML5畫布上繪製SVG文件 在HTML5畫布上繪製SVG文件 Sep 15, 2023 pm 03:09 PM

在HTML5畫布上繪製SVG文件

svg是什麼格式 svg是什麼格式 Dec 29, 2020 pm 03:59 PM

svg是什麼格式

See all articles