jQuery和CSS3炫酷图片和按钮点击波特效源码
jQuery和CSS3炫酷图片和按钮点击波特效源码
ippler是一款效果非常炫酷的jQuery和CSS3图片和按钮点击波特效插件。点击波特效是指在按钮或图片上点击的时候，从点击的位置开始，会产生一种圆形光波向外辐射的炫酷效果。这款点击波特效同时支持桌面设备和移动触摸设备。
使用方法
与Bootstrap结合使用
该点击波特效可以完美的和Bootstrap 3结合，用于制作按钮和链接按钮的点击波特效：
bootstrap按钮点击波效果：
使用步骤
在页面中引入必要的文件：
<!-- If you want to use the buttons on the bootstrap --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- rippler CSS --> <link rel="stylesheet" href="./css/rippler.min.css"> <!-- vendor js --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- rippler js --> <script src="./dist/js/jquery.rippler.min.js"></script>
该点击波特效的HTML结构如下：
<body> <button class="btn btn-primary rippler rippler-default" href="#">bootstrap button</button> </body>
在页面加载完毕后调用该点击波插件：
$(document).ready(function() { $(".rippler").rippler({ effectClass : 'rippler-effect' ,effectSize : 16 // Default size (width & height) ,addElement : 'div' // e.g. 'svg'(feature) ,duration : 400 }); });
浏览器兼容
该点击波特效需要CSS3的支持，可以运行在所有最新版的现代浏览器上。
IE10+
Safari
Chrome
Firefox
Opera
源码演示/下载请点击阅读原文
↓↓↓↓↓↓