当前位置：首页 > 网页特效 > svg

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

分类：svg 日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<script src="js/jquery.min.js"></script>
<script src="js/jquery.svg3dtagcloud.min.js"></script>   
```               
#####  HTML结构
可以使用一个div容器来作为该3D标签云的包裹容器。

```html
<div id="tag-cloud"></div>
```
#####  初始化插件
首先你需要设置一个对象数组遍历，数组中包含你需要制作的标签和它们对应的链接地址。

```html
var entries = [ 
                { label: 'CodePen', url: 'http://codepen.io/', target: '_top' },
                { label: 'three.js', url: 'http://threejs.org/', target: '_top' },
                { label: 'JS Compress', url: 'http://jscompress.com/', target: '_top' },
                { label: 'TinyPNG', url: 'https://tinypng.com/', target: '_top' },
                { label: 'Can I Use', url: 'http://caniuse.com/', target: '_top' },
                { label: 'URL shortener', url: 'https://goo.gl/', target: '_top' },
                { label: 'Twitter', url: 'https://twitter.com/', target: '_top' },
                { label: 'Gulp', url: 'http://gulpjs.com/', target: '_top' },
                { label: 'Browsersync', url: 'https://www.browsersync.io/', target: '_top' },
                { label: 'GitHub', url: 'https://github.com/', target: '_top' },
                { label: 'Shadertoy', url: 'https://www.shadertoy.com/', target: '_top' },
                { label: 'jsPerf', url: 'http://jsperf.com/', target: '_top' },
                { label: 'Foundation', url: 'http://foundation.zurb.com/', target: '_top' },
                { label: 'CreateJS', url: 'http://createjs.com/', target: '_top' },
                { label: 'Velocity.js', url: 'http://julian.com/research/velocity/', target: '_top' },
                { label: 'jQuery', url: 'https://jquery.com/', target: '_top' },
            ];               
```
然后可以通过下面的方法来初始化该3D标签云插件。
```html

$( '#tag-cloud' ).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：是否转换为大写字体。

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果