欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生js实现简单的Ripple按钮实例代码

程序员文章站 2022-07-22 17:04:38
整理文档,搜刮出一个原生js实现简单的ripple按钮的代码,稍微整理精简一下做下分享。 效果如图 准备食材(html部分)

    整理文档,搜刮出一个原生js实现简单的ripple按钮的代码,稍微整理精简一下做下分享。

    效果如图

    原生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怎么做,开始的思路是让宽度和高度随着时间变大,但是实现了之后感觉性能不好,所以才想到了直接增加倍数呗,于是这个功能变完美诞生了,开始享用这份套餐把 !