web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
svg
基于HTML5 SVG可互动的3D标签云jQuery插件
分类:
svg
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
使用该3D标签云插件需要引入jQuery和jquery.svg3dtagcloud.min.js文件。 ```html ``` ##### HTML结构 可以使用一个div容器来作为该3D标签云的包裹容器。 ```html
``` ##### 初始化插件 首先你需要设置一个对象数组遍历,数组中包含你需要制作的标签和它们对应的链接地址。 ```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:是否转换为大写字体。
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告