纯js侧边浮动按钮模块支持自定义(原创)

所属分类:导航-其他导航

 27226  309  查看评论 (16)
分享到微信朋友圈
X
纯js侧边浮动按钮模块支持自定义(原创) ie兼容12

更新时间:2020-01-14 22:15:36

更新说明:

0、新增支持拖拽

1、新增节点hover时颜色加深效果

2、新增z-index参数

3、新增扇形动画效果(fan-in)


更新时间:2020-01-09 23:27:57

float-module

这是一个侧边浮动按钮块,纯js插件。无需依赖jquery,无需写html代码。开局仅需引入一行js,初始化再new一下,大功告成。文件体积小(js仅4.7KB),代码易于扩展,api详细,最重要的!作者持续更新,后续加入更多动画和新特性

1、支持左上,左下,右上,右下四个基本初始化区域,并提供参数支持精细化调整

2、支持自定义主题颜色、图标、动画等

3、文件仅需引入一个js(体积4.7KB),初始化仅一行代码。无需依赖jquery,无需写html代码

4、内置fontawesome4.7.0,包含675个图标(也可以不引入该图标库,使用自己的)

5、完整api和示例请下载并查看float_module.html演示文件

//快速上手
var fm = new FloatModule({
   btn_config:[{
           icon:'fa fa-plus'
       },{
           icon:'fa fa-qq',
           title:'hello qq',
           click: function () {
               alert("hello qq");
           }
       },{
           icon:'fa fa-github',
           title:'hello github',
           click: function () {
               alert("hello github");
           }
       }]
});
相关插件-其他导航

CSS3侧边响应卡片式导航

CSS3侧边响应卡片式导航
  其他导航
 43000  523
  其他导航
 42365  409

纯CSS3扇形导航

纯CSS3打造动感漂亮的扇形菜单
  其他导航
 44459  558

H5响应式菜单导航

H5页面自适应,响应式菜单导航
  其他导航
 50259  317

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

    胡骥 0
    2022/11/30 16:27:18
    请问怎么设置默认展开? 回复
    zhaopengpeng 0
    2022/9/25 12:44:22
    怎么实现点击后更换icon 回复
    ?? 0
    2022/7/8 15:18:27
    能不能支持一下多个按钮模块,弹出方向可自定义 回复
    幸会 0
    2021/2/23 14:00:32
    title离节点的距离怎么调整啊 回复
    做好现在 0
    2020/7/31 19:01:22
    不支持IE浏览器啊,怎么处理
        一个大写的萌比0
        2020/9/13 15:28:32
        亲,这边的建议是换谷歌浏览器哦
    回复
    扶我起来,我还能~ 0
    2020/4/26 17:40:08
    主节点不支持点击事件
        一个大写的萌比1
        2020/4/27 13:58:00

        可以自己选择元素去加自定义事件啊

        document.getElementsByClassName("fm-li-main")[0].addEventListener
    回复
    故人 0
    2020/3/30 14:46:03
    菜单数量怎么增加呀 现在只能四个
        一个大写的萌比1
        2020/3/30 15:13:10
        最多可支持展开四个节点。大部分网站都不会超过4个的,太多了用户体验不好。
    回复
    泉水指挥官coco 0
    2020/3/20 15:51:43
    图标引入没有效果啊
        一个大写的萌比0
        2020/3/25 13:36:30
        贴一下你初始化的代码是怎么写的,顺便看看f12有没有报错,有可能是地址没写对吧
    回复
    junyi5d 0
    2020/1/13 16:01:58
    下一步,可以支持拖拽
        一个大写的萌比0
        2020/1/13 23:32:07
        可以考虑一下
        一个大写的萌比0
        2020/1/15 0:02:34
        已经更新了,支持拖拽
        ??北方菇凉0
        2020/12/16 9:58:44
        效果里不能拖拽呀
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复