Rumah > hujung hadapan web > Tutorial H5 > 基于HTML5 SVG可互动的3D标签云jQuery插件

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

黄舟
Lepaskan: 2017-01-19 13:58:36
asal
1443 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)!


Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan