pi-ka-qiu / button

水波纹按钮

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Overview

使用JavaScript制作 水波纹 特效。使用了animation 所以需要至少ie10。 master分支使用了es6语法,需浏览器支持es6. dev分支是es5语法。

Import using script tag

<link rel="stylesheet" href="./ripple.css" charset="utf-8">
<script src="./ripple.js"></script>

Options

可选参数

Option Description
cName element的className,默认为 "md-button"
r 水波纹最小半径,不传此参数则为自动计算
color 水波纹颜色 默认为:rgba(0, 0, 0, 0.3)
time animation的时间 默认为:0.5s
MaxNum 水波纹的最大数量 默认为:5
center 水波纹的圆心。默认为:false
zIndex 设置z-index 默认为:null,当水波纹被覆盖时,可以使用此参数

方法

Method Description
refresh() 当页面大小变化时,需要手动调用这个方法。

Usage

<button class="md-button">文字</button>
<!--button得position将被设置为relative-->
new Ripple({
        cName: 'md-button',
        color: 'red',
        time: '0.5s',
        MaxNum: 5
    })

Demo

About

水波纹按钮


Languages

Language:JavaScript 84.0%Language:HTML 10.3%Language:CSS 5.6%