基于HTML5 SVG可互动的3D标签云jQuery插件svg3dtagcloud-下载与配置

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

image-20211112220707936

使用方法

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

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

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

<div id="tag-cloud"></div>
初始化插件

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

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

$( '#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:是否转换为大写字体。

实例

var settings = {
    entries: word_array,//这个就是上面获取到的数组
    width: 640,
    height: 480,
    radius: '65%',
    radiusMin: 75,
    bgDraw: false,
    opacityOver: 1.00,
    opacityOut: 0.05,
    opacitySpeed: 6,
    fov: 800,
    speed: 0.5,
    fontFamily: 'Oswald, Arial, sans-serif',
    fontSize: '15',
    fontColor: '#009688',
    fontWeight: 'normal',
    fontStyle: 'normal',
    fontStretch: 'normal',
    fontToUpperCase: true
};
$( '#tag-cloud' ).svg3DTagCloud( settings );

插件下载地址

点击前往下载

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论