点击按钮出现水波纹动画

.ul{display:flex; position:relative; width:600px; margin:auto; text-align:center; color:white;cursor: pointer;}
.ul .li{position:relative; overflow:hidden; width:200px; height:60px; line-height:60px; background: orange;}

<div class="ul">
    <div class="li">TAG ONE</div>
    <div class="li">TAG SECOND</div>
    <div class="li">TAG THIRD</div>
</div>
<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>

;(function($){
    $.fn.wave=function(options){
        var defaults={
            lineColor: ‘white‘,//默认下标线颜色
            lineHeight: 4,//默认下标线高度
            waveColor: ‘lightblue‘,//默认波浪颜色
            index: 0//默认选中标签下标
        }
        var options= $.extend({}, defaults, options);
        this.each(function(){
            var $this = $(this);
            var $buttons = $(‘.‘+options.btnClass, $this);
          $this.append(`<div class="line" style="position:absolute;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;bottom:0;left:${$buttons[options.index].offsetLeft}px;width:${$buttons[options.index].clientWidth}px;height:${options.lineHeight}px;background:${options.lineColor};"><div>`);
          var $line = $(‘.line‘, $this);
          $buttons.each(function(){
              $(this).css("overflow","hidden").click(function(e){
                  var event = e || event; 
                  var $this = $(this);
              $(".wave",$this).remove();
                  $this.append(`<div class="wave" style="position:absolute;transform:scale(0);-webkit-transform:scale(0);border-radius:50%;background:${options.waveColor};opacity:0.4;"></div>`)
                  var x = event.pageX,
                      y = event.pageY,
                      w = this.clientWidth,
                      h = this.clientHeight,
                      left = getElementLeft(this),
                      top = getElementTop(this);
              if(w > h){
                h = w;
              }else{
                w = h;
              }
                  var left = x - w - left,
                          top = y - h - top;
                  var $wave = $(‘.wave‘, $this);
                  if(!$this.hasClass(‘active‘)){
                      $this.addClass(‘active‘).siblings().removeClass(‘active‘);
                      $line.css({left: this.offsetLeft, width: w});
                  }
                  $wave.css({transition: ‘.4s linear‘,‘-webkit-transition‘: ‘.4s linear‘, width: w*2+‘px‘, height: h * 2 + ‘px‘, left: left + ‘px‘, top: top + ‘px‘}).css({transform: ‘scale(1.5)‘, ‘-webkit-transform‘: ‘scale(1.5)‘, opacity: 0}).animate({opacity: 0},400,function(){
                      $(this).remove()
                  });
              })
          })
        });
        //获取标签距离文档左边的距离：
        function getElementLeft(element){
          var actualLeft = element.offsetLeft;
          var current = element.offsetParent;
          while (current !== null){
                        actualLeft += current.offsetLeft;
                        current = current.offsetParent;
          }
          return actualLeft;
        }
        //获取标签距离文档上边的距离：
        function getElementTop(element){
          var actualTop = element.offsetTop;
          var current = element.offsetParent;
          while (current !== null){
                        actualTop += current. offsetTop;
                        current = current.offsetParent;
          }
          return actualTop;
        }
        return this;
      }
})(jQuery)

//调用方式：
window.onload = function(){
    $(‘.ul‘).wave({
　　　　　　lineColor:‘red‘, //下标线颜色
　　　　　　lineHeight: 4, //下标线高度
　　　　　　waveColor: ‘lightgray‘, //波浪颜色
　　　　　　index: 0, //选中标签下标
　　　　　　btnClass: ‘li‘ //按钮类名(必须传)
　　});
}