侧边栏悬浮球菜单实用教程
1简介
2快速使用
3详细api
4其它
这是一个侧边浮动按钮块，纯js插件
无需依赖jquery，无需写html代码
开局仅需引入一行js，初始化再new一下，大功告成
文件体积小（js仅4.7KB），代码易于扩展，api详细
最重要的，作者持续更新，后续加入更多动画和新特性
支持自定义主题颜色、图标、动画等，详见③，e.g:
  • #56B4F8
  • #56DEBC
  • #E40A5D
  • #E4630B
    •  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三种
    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 icon_css_path 空
    • icon图标库css地址，默认使用fontawesome4.7.0
    • 如果想使用页面中已经引入的icon图标库，可以传null不加载fontawesome的css
    • 如果想使用自己项目的icon库，传css全路径到此参数
    12 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%',
    theme_color:'#56b4f8',
    theme_content_color:'#fff',
    font_size:'18px',
    width_height:'60px',
    margin_screen_x:'30px',
    margin_screen_y:'30px',
    margin_li:'10px',
    animation:'slide-in',
    position:'right-bottom',
    icon_css_path:'',
    btn_config:[{}]
    });
    <script>

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

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

    关注网站 AA分享网 ，持续更新不迷路
    AA分享网(www.aafxw.com)是IT资源下载与IT技能学习平台。我们拒绝滥竽充数，只提供精品IT资源！