Material design风格浮动按钮特效

所属分类： JQ特效输入定制和风格

查看演示立即下载

插件描述：语义化，快速且易于定制。受到Google Inbox，Evernote和Path的操作按钮的启发。

Material Floating Button

material-floating-button是一款使用纯Js制作的Material design风格浮动按钮特效。该Material design风格浮动按钮特效提供4种动画特效，它们都可以在鼠标滑过按钮时以炫酷的方式展开按钮。

在此处查看演示以查看实际效果

Material floating button

安装

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

1	`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。

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery滑动日期插件datepicker
下一个特效：基于Bootstrap的jquery可编辑表格插件Bootstable