mdbtn.js

用Canvas实现Material Design按钮效果

项目主页
简介

mdbtn使用canvas绘制按钮按下后的波纹效果

按钮在按下时波纹展开速度较慢,且展开后不消失;松开或者离开按钮则波纹速度会加快,同时在覆盖完空间后自行消失

基本使用方法

导入mdbtn.js

将需要用到效果的部分添加mdbtn的class

在body最后加入mdbtn.init();

在元素上添加data-color=""可以为元素设置按下后的波纹颜色(可以使用十六进制颜色或者rgb颜色)

接口和参数

mdbtn.init(elements,option)

elements(string):可选,用于设置添加效果的类名(默认为mdbtn)

option(object):可选,用于配置mdbtn的属性(属性配置见下面的卡片)

mdbtn.setOption(option)

option(object):必选,用于配置mdbtn的属性(属性配置见下面的卡片)

mdbtn.addElements(elements)

elements(string):必选,添加class为elements的所有元素

一些问题的说明

因为是js初学者,所以肯定存在许多bug,代码写的也比较乱

每个mdbtn元素都会强制加上overflow:hiddenposition:relative,如果有其他css请再在外面套一层

当元素未指定width和height时加入圆角,可能会使里层canvas超出圆角显示(我并不知道为什么),然后似乎将元素设置为display:inline-block可以解决

圆角问题强行给canvas设置圆角暂时解决

无颜色参数
div元素
宽度为100%的div
有高度和宽度的a标签 普通的a标签
有颜色参数
div元素 (#52732b)
宽度为100%的div (rgb(67,113,161))
参数介绍

color:按下后的默认波纹颜色(不影响有data-color的元素)

showPressColor:按下后是否显示按键颜色

pressColor:按下后按键的颜色

processStep:波纹展开速度(数值越大速度越慢,默认80)


本来这一应该做一个修改参数的演示,但是现在懒(其实是觉得麻烦)

关于

这个插件借鉴了网上的一些代码

颜色格式转换

制作:IwYvI

初版时间:2015.8.2

修改时间:2015.11.23