按钮图标
Quantum Paper 风格按钮变形动画特效
PetitQ
Quttons 是一款谷歌 Quantum Paper 风格按钮变形动画特效 jQuery 插件。Quantum Paper（量子纸）是一种新的谷歌 Material Design 语言。它可以改变大小、形状和颜色以容纳新的内容。该插件使用按钮来模拟量子纸效果，效果非常炫酷。
使用方法:
使用这个 Quantum Paper 效果需要引入所有的依赖文件，以及 Quttons.js 和 Quttons.css 文件。
也想出现在这里？联系我们吧
<link rel = "stylesheet" href = "Path/To/Quttons.css" />
<script src = "Path/To/jQuery" type = "text/javascript"></script>
<script src = "Path/To/velocity.js" type = "text/javascript"></script>
<script src = "Path/To/velocity.ui.js" type = "text/javascript"></script>
<script src = "Path/To/Quttons.js" type = "text/javascript"></script>
HTML 结构:
然后你需要制作弹出对话框的内容，你可以使用
来制作，样式可以自定义。你可以为对话框中的按钮添加事件监听，还可以添加一个关闭按钮，只需要在按钮上添加 close class。下面是 demo 中文件上传对话框的 HTML 结构。
注册 ｜
忘记密码
<div id="uploadDialog">
<h2>Upload a new file</h2>
<input type="text" id = "fileUrl" placeholder = "Enter URL">
<div id="button_basic_upload"> Choose a file to upload
</div>
</div>
然后将上面制作好的对话框包裹进一个带qutton class的<div>中，并给它设置一个ID号。
<div class = "qutton" id = "qutton_upload">
...(上一步中创建的对话框代码) ...
</div>
初始化插件:
在页面加载完毕之后，就可以使用下面的方法来初始化这个 Quantum Paper 插件。
var quttonUpload = Qutton.getInstance($('#qutton_upload'));
quttonUpload.init({
icon : './images/icon_upload.png',
backgroundColor : "#917466"
});
在 getInstance()中你需要传入前面包裹
中设置的 ID 号。init()方法中可以传入自定义的配置参数。
配置参数:
这个 Quantum Paper 插件的可用参数如下：
| 参数 | 描述 | 默认值 |
| icon | 在 Qutton 中显示的图标 | None |
| backgroundColor | Qutton 的背景颜色 | #FE0000 |
| width | Qutton 的宽度 | 60 |
| height | Qutton 的高度 | 60 |
| easing | 动画的 easing 效果 | easeInOutQuint |
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
相关文章
热销模板
本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务！
登录