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

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

黄舟

Lepaskan： 2017-01-19 13:58:36

asal

1401 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标签云的包裹容器。

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

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中文网（www.php.cn）！