js 마우스가 탭 탭을 통과할 때 전환 지연을 구현하는 샘플 코드 공유-JS 튜토리얼-php.cn

js 마우스가 탭 탭을 통과할 때 전환 지연을 구현하는 샘플 코드 공유

黄舟

풀어 주다： 2017-03-25 14:43:05

원래의

1406명이 탐색했습니다.

이 글에서는 마우스가 탭 위로 지나갈 때 js의 전환 지연 효과를 주로 자세히 소개하고 있는데, 관심 있는 친구들이 참고할 수 있는 내용이 있습니다.

우연히 발견했습니다. 웹을 탐색하는 동안 이 효과가 나타납니다. 마우스가 실수로 탭 위로 미끄러지면 전환되지 않습니다. 마우스가 잠시 동안 탭 위에 있으면 전환됩니다.

개인적으로 사용자 경험이 좋다고 생각합니다. 장점은 다음과 같습니다. 1. 사용자가 탭 위로 슬라이드만 하면 전환할 필요가 없고 탭 전환에 데이터 요청이 필요한 경우 불필요한 비동기 요청이 발생합니다. 2. 피하십시오. 사용자가 필요하지 않을 때 페이지를 전환하고 이동하여 사용자 경험에 영향을 줍니다.

온라인에서 여러 가지 방법을 확인해 본 결과 다음 방법이 더 간결하고 효과적인 것으로 나타났습니다. 나중에 참조할 수 있도록 정리했습니다.

핵심은 js 코드입니다. 호버를 통과할 때 타이머를 설정하고 전환 메서드의 실행을 지연하며 나갈 때 타이머를 지우는 것이 원칙입니다. 호버링 시간이 지연 시간보다 작으면 타이머가 지워지고 전환 방법이 실행되지 않습니다. 전환은 드웰 시간이 지연 시간보다 클 때만 발생합니다. 이렇게 하면 전환 이벤트 를 트리거하기 위해 탭을 밀어내는 것을 효과적으로 방지할 수 있습니다.

코드 복사

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery.1.11.3.min.js"></script>
    <script>
      $(function() {
        var t_li = $(".tab")
        var c_li = $(".tab-content p")
        t_li.hover(function() {
          var i = t_li.index($(this));

          function way() {
            t_li.removeClass("cur").eq(i).addClass("cur");
            c_li.hide().eq(i).show();
          }
          timer = setTimeout(way, 500);
        }, function() {
          clearTimeout(timer);
        });
      });
    </script>
    <style>
      .head {
        width: 300px;
        height: 50px;
        border: 1px dashed #ccc;
      }
      
      .tab {
        width: 50%;
        float: left;
        line-height: 50px;
        cursor: pointer;
      }
      
      .cur {
        border-bottom: 2px solid red;
      }
    </style>
  </head>
  <body>
    <p style="width: 300px;margin-left: 300px;" class="main">
      <p class="head">
        <p class="tab cur">tab1</p>
        <p class="tab">tab2</p>
      </p>
      <p class="tab-content">
        <p>tab1的内容<br>tab1的内容<br>tab1的内容<br></p>
        <p style="display: none;">tab2的内容<br>tab2的内容<br>tab2的内容<br></p>
      </p>
    </p>
  </body>

</html>

로그인 후 복사

위 내용은 js 마우스가 탭 탭을 통과할 때 전환 지연을 구현하는 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!