jquery ripples水波纹效果( 涟漪效果)
2024-10-18 18:17:10
这个效果是我从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的,博主亲测可用!
最新文章
- Visual Studio 2015在.NET Core RC2项目中的一个错误。
- [MapReduce] Google三驾马车:GFS、MapReduce和Bigtable
- Secure Digital
- 关于android的@TargetApi和@SuppressLint(";NewApi";)
- javascript的this
- 序列化--dict与(file)文件读写
- Cocos2d-x 3.2 学习笔记(一)环境搭建
- Android成长日记-使用Intent实现页面跳转
- Python之路【第六篇】:面向对象编程相关
- Xcode7 项目转 Xcode6 时 出现问题
- 创建dblink 同义词
- 网站开发常用jQuery插件总结(五)滚动条插件nanoscroller
- window对象BOM
- Subsets 【dfs】
- Alyona and flowers
- redis maxheap 51200000
- 线程同步Volatile与Synchronized(一)
- root登陆欢迎界面设置
- webpack4入门配置
- H3C的DHCP中继配置命令