基于HTML5 SVG可互动的3D标签云jQuery插件
Mar 30, 2017 pm 05:47 PM简要教程
svg3dtagcloud.js是一款基于HTML5 SVG的3D标签云jQuery插件。该3D标签云插件不需要额外的CSS样式,可使用鼠标与标签进行互动,并提供很多参数来控制标签云的外观。
使用方法
使用该3D标签云插件需要引入jQuery和jquery.svg3dtagcloud.min.js文件。
1 2 |
|
HTML结构
可以使用一个<p>容器来作为该3D标签云的包裹容器
1 |
|
初始化插件
首先你需要设置一个对象数组遍历,数组中包含你需要制作的标签和它们对应的链接地址。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
然后可以通过下面的方法来初始化该3D标签云插件。
1 |
|
配置参数
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)!

熱門文章

熱門文章

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)