原生js 3D标签云

 查看演示  website  立即下载

更新时间：2023-02-07 22:29:30

更新说明：

1、升级版tagcloud-2.2.js调用方法：

tagCloud({
    selector: "#tagcloud1", // 元素选择器，id 或 class       
    fontsize: 20, // 基本字体大小, 默认16，单位px        
    radius: 200, // 滚动横/纵轴半径, 默认60，单位px，取值60，[60]，[60, 60]       
    mspeed: "slow", // 滚动最大速度, 取值: slow, normal(默认), fast        
    ispeed: "normal", // 滚动初速度, 取值: slow, normal(默认), fast        
    direction: 135, // 初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...      
    keep: false, // 鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动       
    multicolour: true // 彩色字体，颜色随机，取值：true(默认),false
});

2、说明：将上一版本（tagcloud-2.1.js）的 radiusX、radiusY 合并为 radius，通过 radius 值自动判断横纵轴半径

更新时间：2023-02-02 11:50:39

更新说明：

功能：通过改变标签大小、位置、透明度，制造3d视觉差，并循环滚动，当鼠标移入某个标签时，当前标签静止，移出恢复滚动。

调用：参数如下

tagCloud({
    selector: "#tagcloud1", // 元素选择器，id 或 class       
    fontsize: 20, // 基本字体大小, 默认16，单位px       
    radiusX: 100, // 滚动横轴半径, 默认60，单位px       
    radiusY: 200, // 滚动纵轴半径, 默认60，单位px        
    mspeed: "slow", // 滚动最大速度, 取值: slow, normal(默认), fast       
    ispeed: "normal", // 滚动初速度, 取值: slow, normal(默认), fast        
    direction: 135, // 初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...        
    keep: false, // 鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动      
    multicolour: true // 彩色字体，颜色随机，取值：true(默认),false  
});

升级说明：

① 将原来的 radius 改成 radiusX、radiusY，以此控制滚动区域，可实现椭圆滚动

radiusX: 100, // 滚动横轴半径, 默认60，单位px 
radiusY: 200, // 滚动纵轴半径, 默认60，单位px

② 增加了颜色控制，默认为彩色

multicolour: true

③ 若需实时刷新数据，注释掉这两行

/*
if (!!TagCloud._set(options.element)) {
    instance.push(new TagCloud(options));
}
*/

使用方法

功能：通过改变标签大小、位置、透明度，制造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行

二、同一个页面可同时存在多个标签云模块。

PREVIOUS:
NEXT:
手风琴展开动画效果（感谢上传手风琴效果的朋友）
jquery 省市区三级联动选择（原创）