原生js 3D标签云

所属分类:UI,其他-标签,动画效果

原生js 3D标签云 ie兼容8

使用方法

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

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

相关插件-标签,动画效果

css3-button-with-tooltip

css3-button-with-tooltip很清新
  标签
 12190  14

jQuery实用的文章自定义标签插件(原创)

自己项目中用到的,也许对萌新们有点用处,特此贴上
  标签
 1829  21

云签,字体悬浮,无限移动(原创)

js原生实现字体悬浮,也就是云签,鼠标移入字体悬停,点击调连接,移开继续移动漂浮
  标签
 1680  18

select美化小插件

select美化插件
  标签
 22782  77

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币

    douya123 0
    2018/6/7 10:00:05
    这个 一定要是a标签么 我改了样式 改成div 然后动态加载出来的 重叠在一起而且没有动效 怎么解决啊 回复
    胡家_大少爷 0
    2018/5/23 14:26:14
    我动态加载的数据,只有第一次能转动,后面的都重叠,请问如何解决呢
        胡家_大少爷1
        2018/5/23 18:14:18

        已处理好了,没注意 将

        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(默认) 对应 减速至初速度滚动, 随鼠标滚动
        });
        douya1230
        2018/6/7 9:57:38
        你好 你的动态加载的也可以生效么 我的不可以 怎么解决
    回复
    依凡 0
    2018/5/17 12:14:49
    如何控制标签的最大滚动范围 我需要放在一个长400 宽200的div中 但是一直会超出
        依凡0
        2018/5/17 12:16:21
        self.box.style.minHeight = 0.1 * self.size + "px";
        self.box.style.minWidth = 0.1 * self.size + "px";
        也试过了没有起到作用
        areyouOk0
        2018/5/17 12:22:46
        给div加要CSS样式overflow: hidden;超出隐藏
        依凡0
        2018/5/17 14:09:50
        有效果,谢谢了
    回复
    无名氏 0
    2018/5/11 9:37:37
    本地测试能兼容ie7(ie6没有测试),发布出来不能兼容ie7了,原参考网址:http://www.jq22.com/demo/tagCloud201805110051/
    在源代码基础上优化了标签之间的层级问题,调试了脚本使之兼容ie7,添加了鼠标移入静止的功能。
        胡家_大少爷0
        2018/5/23 18:22:17
        刚刚 F12 Copy下来验证了 的确可以 谢谢大佬分享!
        douya1230
        2018/6/15 16:34:44
        你好 这个动态请求过来内容 定时刷新效果就没有了 为什么 只能执行一次么
    回复
取消回复