基于HTML5 SVG可互动的3D标签云jQuery插件-Tutorial H5-php.cn

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

PHP中文网

Lepaskan： 2017-03-30 17:47:40

asal

2783 orang telah melayarinya

简要教程

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>

Salin selepas log masuk

HTML结构

可以使用一个

容器来作为该3D标签云的包裹容器

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

Salin selepas log masuk

初始化插件

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

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; },
            ];

Salin selepas log masuk

然后可以通过下面的方法来初始化该3D标签云插件。

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

Salin selepas log masuk

配置参数

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）！

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

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