TagCloud
v2.5.0
Published
3D TagCloud
Downloads
1,098
Readme
English | 中文
如何使用
npm
$ npm i -S TagCloud
const TagCloud = require('TagCloud');
const container = '.tagcloud';
const texts = [
'3D', 'TagCloud', 'JavaScript',
'CSS3', 'Animation', 'Interactive',
'Mouse', 'Rolling', 'Sphere',
'6KB', 'v2.x',
];
const options = {};
TagCloud(container, texts, options);
浏览器
<!-- html -->
<script type="text/javascript" src="./dist/TagCloud.min.js"></script>
TagCloud(container, texts, options);
构造函数
TagCloud(container, texts, options)
返回 tagcloud 实例。
container
类型: String
或 HTMLElement
或 Array
用于构造标签云的容器。
texts
类型: Array
初始化时的标签文本列表。
options
类型: Object
options.radius
类型: Number
默认值: 100
单位: px
滚动半径。
options.maxSpeed
可选值: 'slow'
, 'normal'
, 'fast'
默认值: 'normal'
滚动最大速度。
options.initSpeed
可选值: 'slow'
, 'normal'
, 'fast'
默认值: 'normal'
滚动初始速度。
options.direction
类型: Number
默认值: 135
(向右下滚动)
单位: 顺时针角度 deg
滚动初始方向,例如 0
(向上滚动) , 90
(向左滚动), 135
(向右下滚动) ...
options.keep
类型: Boolean
默认值: true
鼠标移除容器区域时是否保持继续滚动。默认为是 true
,减速至初始滚动速度,然后继续随鼠标滚动。
options.reverseDirection
类型: Boolean
默认值: false
当鼠标控制方向时,是否要逆转方向。
options.containerClass
类型: String
默认值: tagcloud
用于 tagcloud 容器的CSS样式 class。
options.itemClass
类型: String
默认值: tagcloud--item
用于 tagcloud 标签项的CSS样式 class。
options.useContainerInlineStyles
Type: Boolean
Default: true
使用正常视图的内联样式添加到 tagcloud 容器上;禁用此选项后,你必须自己添加CSS。
options.useItemInlineStyles
类型: Boolean
默认值: true
使用正常视图的内联样式添加到 tagcloud 标签项上;禁用此选项后,你必须自己添加CSS。
实例方法
tagcloud.update(texts)
更新标签文本列表。
tagcloud.pause()
暂停标签云动画。
tagcloud.resume()
继续标签云动画。
tagcloud.destroy()
摧毁标签云实例。
自定义事件
使用事件委托机制来为标签云子项添加自定义事件
以下是示例,点击标签云子项跳转到 Google 去搜索关键字
let rootEl = document.querySelector('.content');
rootEl.addEventListener('click', function clickEventHandler(e) {
if (e.target.className === 'tagcloud--item') {
window.open(`https://www.google.com/search?q=${e.target.innerText}`, '_blank');
// your code here
}
});
License
MIT