原生js 3D标签云

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

 31120  397  查看评论 (19)
分享到微信朋友圈
X
原生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行

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

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

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

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

css3-button-with-tooltip

css3-button-with-tooltip很清新
  标签
 28023  257

jQuery快捷标签添加

可以弹窗出来列表供用户添加快捷标签,代码注释全
  标签
 8042  151

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

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

讨论这个项目(19)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Otaku、 0
    2019/7/11 16:02:20
    楼主是个炒股的程序员吧 回复
    小情绪反复作祟 0
    2019/1/17 10:49:06
    怎么改成椭圆环绕的
        Ch0
        2019/3/20 11:45:30
        我也想问
    回复
    米歪歪. 0
    2018/11/7 17:59:47
    这个旋转的中心点要怎么移动啊 回复
    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/7/19 15:06:21
        我的也是 动态添加数据之后,第一次添加可以,第二次就重叠在一起,目前有一个囚可以解决,每次执行效果前 ,把效果元素删除 然后通过append 在添加到相应的位置,这样是可以添加多次,但我始终不明年,为啥点干净就不行
        得不到的永远矜贵0
        2018/7/19 15:13:37
        但是把这段代码放到ajax后面也不行啊
        九歌、1
        2020/4/2 13:52:36
        用append是可以的,先移除remove(tagcloud一起移除),然后再append,亲测可以
        雨中茉莉0
        2020/11/18 9:42:03
        你好,能说的在明白点吗?
    回复
    依凡 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
        你好 这个动态请求过来内容 定时刷新效果就没有了 为什么 只能执行一次么
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复