首页 | 1383 | 565 | 282 | 添加收藏 上一个 下一个
Material design风格浮动按钮特效

安装


可以通过npm来安装该插件。


npm install mfb --save

使用方法


在页面中引入mfb.css和mfb.js文件。


<link href="path/to/css/mfb.css" rel="stylesheet">
<script src="path/to/js/mfb.js"></script>

HTML结构


创建浮动按钮的HTML结构如下:


<ul id="menu" class="mfb-component--br mfb-zoomin" data-mfb-toggle="hover">
  <li class="mfb-component__wrap">
    <a href="#" class="mfb-component__button--main">
      <i class="mfb-component__main-icon--resting ion-plus-round"></i>
      <i class="mfb-component__main-icon--active ion-close-round"></i>
    </a>
    <ul class="mfb-component__list">
      <li>
        <a href="#" data-mfb-label="Child Button 1" class="mfb-component__button--child">
          <i class="mfb-component__child-icon ion-social-github"></i>
        </a>
      </li>
      <li>
        <a href="#" data-mfb-label="Child Button 2" class="mfb-component__button--child">
          <i class="mfb-component__child-icon ion-social-octocat"></i>
        </a>
      </li>
      <li>
        <a href="#"
           data-mfb-label="Child Button 3" class="mfb-component__button--child">
          <i class="mfb-component__child-icon ion-social-twitter"></i>
        </a>
      </li>
    </ul>
  </li>
</ul>

其中,使用的class的含义如下:



  • mfb-component?br:位置class,可用的还有:mfb-component?tl, mfb-component?br, mfb-component?tr, mfb-component?bl。

  • mfb-zoomin:动画方式,可选的有:mfb-zoomin, mfb-slidein, mfb-slidein-spring 和 mfb-fountain。

  • data-mfb-toggle='hover':打开按钮的事件,如果需要点击打开按钮,可以将事件切换为click。