web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
按钮特效
谷歌Quantum Paper风格按钮变形动画特效
分类:
按钮特效
日期:
2024-05-14
点击(5)
评论(0)
演 示
免费下载
简介
使用这个Quantum Paper效果需要引入所有的依赖文件,以及Quttons.js和Quttons.css文件。 ```html
``` ##### HTML结构 然后你需要制作弹出对话框的内容,你可以使用div来制作,样式可以自定义。你可以为对话框中的按钮添加事件监听,还可以添加一个关闭按钮,只需要在按钮上添加close class。下面是demo中文件上传对话框的HTML结构。 ```html
Upload a new file
Choose a file to upload
``` 然后将上面制作好的对话框包裹进一个带qutton class的div中,并给它设置一个ID号。 ```html
...(上一步中创建的对话框代码) ...
``` ##### 初始化插件 在页面加载完毕之后,就可以使用下面的方法来初始化这个Quantum Paper插件。 ```html var quttonUpload = Qutton.getInstance($('#qutton_upload')); quttonUpload.init({ icon : './images/icon_upload.png', backgroundColor : "#917466" }); ``` 在getInstance()中你需要传入前面包裹div中设置的ID号。init()方法中可以传入自定义的配置参数。 ##### 配置参数 这个Quantum Paper插件的可用参数如下: | 参数 | 描述 | 默认值 | | ------------ | ------------ | ------------ | |icon|在Qutton中显示的图标|None| |backgroundColor|Qutton的背景颜色|#FE0000| |width|Qutton的宽度|60| |height|Qutton的高度|60| |easing|动画的easing效果|easeInOutQuint|
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告