|
rippler是一款效果非常炫酷的jQuery和CSS3图片和按钮点击波特效插件。点击波特效是指在按钮或图片上点击的时候，从点击的位置开始，会产生一种圆形光波向外辐射的炫酷效果。这款点击波特效同时支持桌面设备和移动触摸设备。 
相同的效果还有：jQuery和CSS3炫酷按钮点击波特效。
使用方法
与Bootstrup结合使用
该点击波特效可以完美的和Bootstrup 3结合，用于制作按钮和链接按钮的点击波特效：
bootstrup按钮点击波效果：
使用步骤
- 在页面中引入必要的文件：
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/rippler.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">script>
<script src="./dist/js/jquery.rippler.min.js">script>
|
- 该点击波特效的HTML结构如下：
<body>
<button class="btn btn-primary rippler rippler-default" href="#">bootstrap buttonbutton>
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
原文地址：
|
