jquery ripples水波纹效果( 涟漪效果)

这个效果是我从bootstrap-material-design上面分离下来的,bootstrap-material-design的一些组件样式我不太不喜欢,但是非常喜欢这个水波纹效果,所以就有了这篇文章:

先上效果图:

jquery ripples水波纹效果( 涟漪效果)

点击按钮后,会有一道波纹扩散开来

下面是资源地址:http://pan.baidu.com/s/1pL6LGBh

提取密码: 7y6x

就两文件:

jquery ripples水波纹效果( 涟漪效果)

下面是使用教程:

第一步:引入rippels.css 和rippels.js

<link rel="stylesheet" type="text/css" href="css/ripples.css"/>
<script src="js/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ripples.js" type="text/javascript" charset="utf-8"></script>
 

第二步:初始化

<script type="text/javascript">
$(function(){
$("button,a").ripples();
})
</script>

遇到的问题:波纹效果扩散出来了??如下图:

jquery ripples水波纹效果( 涟漪效果)

给元素加上“position:relative”属性即可。

上面的案例是我正在做bootstrap UI 组件优化,引入了bootstrap的,博主亲测可用!

上一篇:使用Navicat连接阿里云ECS服务器上的MySQL数据库


下一篇:C#注释的几种方法