用css3模拟谷歌MaterialDesign Ripple
模拟谷歌水波纹按钮效果插件 提供两个版本:
原生js版 不依赖任何库 JQuery版 使用更轻巧 Demo<script src="js/rippleButton.js" type="text/javascript"></script> Usage
<div class="btn">Button</div> <script type="text/javascript"> var ripple = new RippleButton('.btn',{ alpha: '0.5', speed: '1.1s', transitionEnd:function(){ //transition End console.log('finished'); } }); </script> for- JQuery Installation
<script src="js/jquery.rippleButton.js" type="text/javascript"></script> Usage
<div class="btn">Button</div> <script type="text/javascript"> $('.btn').rippleButton(); // or $('.btn').rippleButton({ alpha: '0.5', speed: '1.1s', transitionEnd:function(){ console.log('finished'); } }); </script> Options
| Option | Default | type | Description |
|---|---|---|---|
| alpha | 0.5s | string | The transparency alpha of the ripple. |
| speed | 1.1s | string | The duration which are given in milliseconds of effect. |
| transitionEnd | function(){} | function | Callback after transition end. |
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
