float-module快速使用教程
1简介
2快速使用
3详细api
4其它
这是一个侧边浮动按钮块，纯js插件
无需依赖jquery，无需写html代码
开局仅需引入一行js，初始化再new一下，大功告成
最重要的，作者持续更新，后续加入更多动画和新特性
支持自定义主题颜色、图标、动画等，详见③，e.g:
  • #56B4F8
  • #56DEBC
  • #E40A5D
  • #E4630B
    • 2020-01-13 更新日志
    0、新增支持拖拽
    1、新增节点hover时颜色加深效果
    2、新增z-index参数
    3、新增扇形动画（fan-in）效果，最终形态如下
     1、将float文件夹放到项目中，引入js:

    <script src="float/js/float-module.js" type="text/javascript"></script>

     2、初始化:

    <script type="text/javascript">
    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-wechat',//展开后第二个节点
    title:'hello wechat', //以此类推，最多可支持展开四个节点
    click: function () {
    alert("hello wechat");
    }
    }]
    });
    <script>

     3、然后关机下班，底薪到手
     1、api文档:
    序号 键值 默认 说明
    1 radius 50% 按钮圆角，单位可以是%或px
    2 animation slide-in 动画效果
    目前有slide-in、zoom-in、spring-in、fan-in四种
    特殊说明：fan-in扇形动画最多仅支持展开3个节点
    3 position right-bottom 主节点初始位置
    可用left、right与top、bottom自由组合（用-分隔）
    4 theme_color #56B4F8 主题背景颜色
    5 theme_content_color #fff 字体颜色
    6 font_size 18px 图标大小
    7 width_height 60px 节点边长（长宽都一样）
    8 margin_screen_x 30px 水平方向距离屏幕边框距离
    9 margin_screen_y 30px 垂直方向距离屏幕边框距离
    10 margin_li 10px 节点与节点之间间隔距离
    11 fan_ratio 1.0 扇形动画距离圆心乘系数（仅当动画为扇形时有效）
    12 z_index 996 浮动模块z-index，默认996
    13 draggable true 是否支持拖拽
    14 icon_css_path 空
    • icon图标库css地址，默认使用fontawesome4.7.0，共675个图标
    • 如果想使用页面中已经引入的icon图标库，可以传null不加载fontawesome的css
    • 如果想使用自己项目的icon库，传css全路径到此参数
    15 btn_config [{}]
    • 格式如[{icon:''},{title:'', icon:'', click:fun},{},...]
    • icon是展示的图标，title是hover上去左侧显示的文字，click是点击事件
    • 数组第一位为主节点,只用传icon就对了
    • 最大支持展开4个节点（即数组最大长度为5）
     2、默认全参构造js如下:

    <script type="text/javascript">
    var fm = new FloatModule({
    radius:'50%', //按钮圆角度，单位可以是%或px
    theme_color:'#56b4f8', //主题颜色
    theme_content_color:'#fff', //图标颜色
    font_size:'18px',//图标大小
    width_height:'60px', //节点宽高
    margin_screen_x:'30px',//节点与屏幕边框x轴距离
    margin_screen_y:'30px',//节点与屏幕边框y轴距离
    margin_li:'10px', //节点与节点之间间隔距离
    animation:'slide-in', //动画效果
    position:'right-bottom',//主节点初始位置
    fan_ratio:1.0, //动画效果为fan-in的时候，可自行调整距离圆心乘系数
    z_index:996, //字如其名
    draggable:true,//是否支持拖拽
    icon_css_path:'',//图标库css文件全路径
    btn_config:[{}]//展开节点参数，格式见api
    });     //
    <script>

     2、目前暂时只提供显示/隐藏事件:

    fm.show();
    fm.hide();

    关注作者jq22主页，持续更新不迷路
    https://www.jq22.com/mem993399
    顺便打个广告，还有地址选择器、图片预览插件，有需要的小伙伴可以去试试
    如果使用过程中有bug反馈或建议，请联系qq604712572