js鼠標經過tab選項卡時實現(xiàn)切換延遲的示例分析-創(chuàng)新互聯(lián)

這篇文章將為大家詳細講解有關js鼠標經過tab選項卡時實現(xiàn)切換延遲的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)作為成都網(wǎng)站建設公司，專注成都網(wǎng)站建設、網(wǎng)站設計，有關企業(yè)網(wǎng)站制作方案、改版、費用等問題，行業(yè)涉及餐廳設計等多個領域，已為上千家企業(yè)服務，得到了客戶的尊重與認可。

偶然間在瀏覽網(wǎng)頁時，發(fā)現(xiàn)這樣的效果。當鼠標不經意間滑過tab時并不會切換，當鼠標停留在上面一段時候后才會切換。

個人覺得用戶體驗不錯，優(yōu)點是1.當用戶只是滑過標簽，并不需要切換，而此時如果切換標簽需要請求數(shù)據(jù)時，會避免不必要的異步請求；2.避免頁面在用戶不需要的時候切換跳動，影響用戶體驗。

網(wǎng)上查閱了幾個方法，發(fā)現(xiàn)下面的方法更簡潔有效。整理下來，供以后參考。

其中的重點是那段js代碼：原理是，通過hover的時候設置定時器，延遲執(zhí)行切換方法，離開時，清楚計時器。當hover的時間小于延遲時間時，會清楚計時器，不會執(zhí)行切換方法。僅當停留時間大于延遲時間才會切換。這樣能有效避免滑過tab觸發(fā)切換事件。

復制代碼

<!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 div")
        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>
    <div  class="main">
      <div class="head">
        <div class="tab cur">tab1</div>
        <div class="tab">tab2</div>
      </div>
      <div class="tab-content">
        <div>tab1的內容<br>tab1的內容<br>tab1的內容<br></div>
        <div >tab2的內容<br>tab2的內容<br>tab2的內容<br></div>
      </div>
    </div>
  </body>

</html>

關于“js鼠標經過tab選項卡時實現(xiàn)切換延遲的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站chinadenli.net，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

新聞標題：js鼠標經過tab選項卡時實現(xiàn)切換延遲的示例分析-創(chuàng)新互聯(lián)
文章起源：http://chinadenli.net/article8/dggiop.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、網(wǎng)站建設、做網(wǎng)站、App開發(fā)、定制網(wǎng)站、靜態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

js鼠標經過tab選項卡時實現(xiàn)切換延遲的示例分析-創(chuàng)新互聯(lián)