原生js实现简单的Ripple按钮实例代码
2017-03-24 10:25
656 查看
整理文档,搜刮出一个原生js实现简单的Ripple按钮的代码,稍微整理精简一下做下分享。
效果如图
准备食材(html部分)
<ul id="nav"> <li> <a href='#'> <span>首页</span> <span class="circle"></span> </a> </li> <li> <a href='#'> <span>我的</span> <span class="circle"></span> </a> </li> <li> <a href='#'> <span>更多</span> <span class="circle"></span> </a> </li> </ul>
典型的菜单li布局,里面的
span.circle表示的是触摸弹出的小圆圈。
准备辅料 (css部分)
#nav { display: flex; } #nav li { position: relative; overflow: hidden; flex: 1; } li a { display: flex; flex-direction: column; justify-content: center; align-items: center; } .circle{ position: absolute; background: rgba(86,187,247,.1); width: 1px; height: 1px; top:50%; left: 50%; border-radius: 50%; } .circle.act{ animation: navCircle .4s; } @keyframes navCircle { from {transform: scale(0);border-radius: 50%;} to {transform:scale(200);border-radius: 50%;} }
我的思路是这样的,给li相对定位,给小圆圈绝对定位,再给小圆圈添加动画
navCircle,采用css3的缩放使其变大,至于为什么是200倍和.4s呢,经过测试这样更人性化,其余的倍数你们也可以试试。
大火烹饪 (js部分)
var li = document.getElementById('nav').querySelectorAll('li'); var circle = document.getElementById('nav').querySelectorAll('.circle'); for(var i=0,len = li.length;i<len;i++){ ((i)=>{ li[i].addEventListener('click',(e)=>{ circle[i].setAttribute('class','circle act'); circle[i].setAttribute('style','top:'+e.layerY+'px;left:'+e.layerX+'px'); }); li[i].addEventListener('touchend',()=>{ circle[i].setAttribute('class','circle'); }) })(i) }
代码很简单,相信大家也猜到了,点击li的时候给小圆圈添加class
'act',并且设置小圆圈的起始位置,监听触摸结束的时候,取消class
'act',有人肯定要问了,为什么你不用
touchstart呢,唉,因为没有
layerY这个属性,找了半天都没找到啊。还有为什么不用
forEach,有的浏览器不支持啊,泪奔= = !
友情提示!
touchend仅支持移动端
结束
做这个部分是因为我们安卓app里面有这个功能,所以我就想看看h5怎么做,开始的思路是让宽度和高度随着时间变大,但是实现了之后感觉性能不好,所以才想到了直接增加倍数呗,于是这个功能变完美诞生了,开始享用这份套餐把 !
您可能感兴趣的文章:
相关文章推荐
- 实现一个简单的按钮实例-上下左右,左旋转,右旋转,放大缩小。代码重构
- css3实现的简单开关按钮代码实例:
- JS简单实现文件上传实例代码(无需插件)
- JS简单实现文件上传实例代码(无需插件)
- JAVAWEB实现简单的商城项目(一)实例代码解析
- Javascript简单实现面向对象编程继承实例代码
- java实现简单留言板功能的代码实例
- JS简单实现文件上传实例代码(无需插件)
- VC++简单实现关机、重启计算机实例代码
- JavaScript实现简单的时钟实例代码
- Webview实现android简单的浏览器实例代码
- iOS 实现简单的移动UIView代码实例
- 简单SNMP管理程序的VC++代码实例实现
- 用VBS代码实现简单的场景恢复实例
- 简单SNMP管理程序的VC++代码实例实现
- android实现简单的画画板实例代码
- JS返回上一页实例代码通过图片和按钮分别实现
- 代码实现窗体简单实例
- jsb 实现简单的读取ui,ui里的动画,button按钮事件,执行动画代码
- Spring3步实现定时任务,超简单,附代码实例