기본 js를 사용하여 Ripple 버튼을 구현하는 간단한 예제 코드

이 글에서는 간단한 Ripple 버튼 예제 코드를 구현하기 위한 네이티브 js를 주로 소개하는데, 관심 있는 친구들이 참고할 수 있습니다.

문서를 정리하고, 간단한 Ripple 버튼을 구현하기 위한 네이티브 js 코드를 검색하고, 조금 정리하여 공유를 위해 간소화합니다.

효과는 아래와 같습니다

재료 준비(html 부분)

 <ul id="nav">
  <li>
   <a href=&#39;#&#39;>
    <span>首页</span>
   <span class="circle"></span>
   </a>
  </li>
  <li>
   <a href=&#39;#&#39;>
    <span>我的</span>
   <span class="circle"></span>
   </a>
  </li>
  <li>
   <a href=&#39;#&#39;>
    <span>更多</span>
   <span class="circle"></span>
   </a>
  </li>
 </ul>

전형적인 메뉴 리 레이아웃, 내부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%;}
 }

제 생각은 작은 원에 대한 리의 상대 위치, 절대 위치, 그리고 작은 원에 애니메이션을 추가하는 것입니다. 원navCircle, CSS3 스케일링을 사용하여 더 크게 만듭니다. 왜 200배이고 .4초인지는 테스트 후에 더 사용자 친화적입니다.

Fire Cooking(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(&#39;click&#39;,(e)=>{
     circle[i].setAttribute(&#39;class&#39;,&#39;circle act&#39;);
     circle[i].setAttribute(&#39;style&#39;,&#39;top:&#39;+e.layerY+&#39;px;left:&#39;+e.layerX+&#39;px&#39;);
    });

    li[i].addEventListener(&#39;touchend&#39;,()=>{
     circle[i].setAttribute(&#39;class&#39;,&#39;circle&#39;);
    })
    })(i)

   }

코드는 매우 간단합니다. li를 클릭하면 작은 항목에 클래스 'act'가 추가됩니다. 원을 만들어서 설정하세요. 모니터링 터치가 끝나면 클래스를 취소하세요'act'. 혹시 touchstart를 사용하지 않으시겠어요? 오랫동안 검색했지만 찾을 수 없었습니다. 그리고 <a href="http://www.php.cn/wiki/127.html" target="_blank">forEach<code>layerY를 사용하면 안 됩니다. 일부 브라우저에서는 이를 지원하지 않습니다. , 눈물을 흘리다 = =! <a href="http://www.php.cn/wiki/127.html" target="_blank">forEach</a>

친절한 알림!

모바일 단말기만 지원touchend

종료

이 부분을 하는 이유는 우리 안드로이드 앱에도 이런 기능이 있어서 h5는 어떻게 하는지 보고 싶네요 시작 시간이 지날수록 너비와 높이가 커지도록 하는 것이 아이디어였는데, 구현하고 나니 성능이 좋지 않아서 직접 배수를 늘려볼까 생각하다가 이 기능이 완성되어 탄생하게 되었습니다. 패키지!

위 내용은 기본 js를 사용하여 Ripple 버튼을 구현하는 간단한 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!