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

2023-05-20,,

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

先上效果图:

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

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

提取密码: 7y6x

就两文件:

下面是使用教程:

第一步:引入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>

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

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

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

jquery ripples水波纹效果( 涟漪效果)的相关教程结束。

《jquery ripples水波纹效果( 涟漪效果).doc》

下载本文的Word格式文档,以方便收藏与打印。