javascript - 涟漪效果CSS | ipad native 应用程序

Question

涟漪效应无法正常工作。 - iPad 原生应用程序。

1. 效果应用于导航上的所有按钮，而应该在 li 上运行。

请告诉我错误在哪里。

(function (window, $) {
  
  $(function() {
    
    $('.ripple').on('click', function (event) {
      event.preventDefault();
      
      var $div = $('<div/>'),
          btnOffset = $(this).offset(),
          xPos = event.pageX - btnOffset.left,
          yPos = event.pageY - btnOffset.top;
      $div
        .addClass('circle')
        .css({
          top: yPos - 15,
          left: xPos - 15
        }) 
        .appendTo($(this));

      window.setTimeout(function(){
        $div.remove();
      }, 1000);
    });
    
  });
  
})(window, jQuery);

nav {
  position: relative;
  width: 1024px;
  background-color: #25518b;
  bottom: 0;
  height: 60px;
}

#home-btn {
  position: absolute;
  width: 79px;
  height: 60px;
  left: 0;
  background: url(../images/home.png) no-repeat center center;
  background-size: 28px 27px;
}

ul.navi {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 945px;
  position: absolute;
  left: 79px;
}

ul.navi li {
  float: left;
  width: 188px;
  height: 60px;
  border-left: 1px #959595 solid;
  font-size: 16.5px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: white;
  text-align: center;
  display: table;
}

ul.navi li a {
  display: table-cell;
  vertical-align: middle;
  text-decoration: none;
  color: white;
}


/* Ripple Effect for navigation */

.circle {
  position: absolute;
  width: 30px;
  height: 30px;
  background: white;
  border-radius: 50%;
  -webkit-animation: scale-circle 2.5s;
          animation: scale-circle 2.5s;
}

@-webkit-keyframes scale-circle {
  from {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    opacity: 0.6;
  }
  to {
    -webkit-transform: scale(100);
            transform: scale(100);
    opacity: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    <div id="home-btn"></div>
    <ul class="navi">
      <li class=""><a href="#" class="ripple active">Link1</a></li>
      <li><a class="ripple" href="#">Link2</a></li>
      <li><a class="ripple" href="#">Link3</a></li>
      <li><a class="ripple" href="#">Link4</a></li>
      <li><a class="ripple" href="#">Link5</a></li>
    </ul>
  </nav>

<小时/>

链接:http://codepen.io/Ashish9342/pen/wzqEdO

Answer 1

首先，如果你想要有涟漪效果，请尝试使用ripple cssanimation。尝试使用circle类正确定位您的div，并为其提供适当的宽度和高度。您可以在 codepen link 中查看工作示例。 .

(function (window, $) {
  
  $(function() {
    
    $('.ripple').on('click', function (event) {
      event.preventDefault();
            var parent = $(this).parent();
             var height = parent.height();
             var width = parent.width();
      var $div = $('<div/>'),
          btnOffset = $(this).parent().offset(),      
          maxW = $("li").width(),
          xPos = $(this).position().left; //event.pageX - btnOffset.left,
          yPos =  $(this).position().top; // event.pageY - btnOffset.top;
          
      $div
        .addClass('circle')
        .css({
           width: width,
           height: height,
          top: yPos,
          left: xPos
        }) 
        .appendTo($(this));

      window.setTimeout(function(){
        $div.remove();
      }, 1000);
    });
    
  });
  
})(window, jQuery);

nav {
  position: relative;
  width: 1024px;
  background-color: #25518b;
  bottom: 0;
  height: 60px;
}

#home-btn {
  position: absolute;
  width: 79px;
  height: 60px;
  left: 0;
  background: url(../images/home.png) no-repeat center center;
  background-size: 28px 27px;
}

ul.navi {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 945px;
  position: absolute;
  left: 79px;
}

ul.navi li {
  float: left;
  width: 188px;
  height: 60px;
  border-left: 1px #959595 solid;
  font-size: 16.5px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: white;
  text-align: center;
  display: table;
}

ul.navi li a {
  display: table-cell;
  vertical-align: middle;
  text-decoration: none;
  color: white;
}


/* Ripple Effect for navigation */

.circle {
  position: absolute;
  z-index: 1;
  width: 30px;
  height: 30px;
  background: white;
  border-radius: 50%;
  -webkit-animation: ripple 1s ease-out;
          animation: ripple 1s ease-out;
          opacity: 0.5;


}


@keyframes ripple {
  0% {
    transform: scale(0);
  }
  20% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

   <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>  

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css">

    <link rel="stylesheet" href="css/styles.css">
    <script src="js/script.js"></script>
</head>

<body>
	  <nav>
    <div id="home-btn"></div>
    <ul class="navi">
      <li class=""><a href="#" class="ripple active">Link1</a></li>
      <li><a class="ripple" href="#">Link2</a></li>
      <li><a class="ripple" href="#">Link3</a></li>
      <li><a class="ripple" href="#">Link4</a></li>
      <li><a class="ripple" href="#">Link5</a></li>
    </ul>
  </nav>