功能:通过改变标签大小、位置、透明度,制造3d视觉差,并循环滚动,当鼠标移入某个标签时,当前标签静止,移出恢复滚动。
调用:参数如下
tagcloud({ selector: ".tagcloud", //元素选择器 fontsize: 16, //基本字体大小, 单位px radius: 100, //滚动半径, 单位px mspeed: "normal", //滚动最大速度, 取值: slow, normal(默认), fast ispeed: "normal", //滚动初速度, 取值: slow, normal(默认), fast direction: 135, //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)... keep: false //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动 });
一、这两行是控制滚动区域宽高的,实际的区域是以宽高为基础的外圆或外椭圆形,可根据项目要求修改
self.box.style.minHeight = 1.2 * self.size + "px"; // 77行 self.box.style.minWidth = 2.5 * self.size + "px"; // 78行
二、同一个页面可同时存在多个标签云模块。
已处理好了,没注意 将
tagcloud({ // active: true, selector: ".tagcloud", //元素选择器 fontsize: 16, //基本字体大小, 单位px radius: 200, //滚动半径, 单位px mspeed: "normal", //滚动最大速度, 取值: slow, normal(默认), fast ispeed: "normal", //滚动初速度, 取值: slow, normal(默认), fast direction: 135, //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)... keep: false //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动 }); 这段代码, 写在Ajax代码之后就可以了 $.ajax({ //ajax }) tagcloud({ // active: true, selector: ".tagcloud", //元素选择器 fontsize: 16, //基本字体大小, 单位px radius: 200, //滚动半径, 单位px mspeed: "normal", //滚动最大速度, 取值: slow, normal(默认), fast ispeed: "normal", //滚动初速度, 取值: slow, normal(默认), fast direction: 135, //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)... keep: false //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动 });