编程 Javascript

js鼠标经过tab选项卡时实现切换延迟

Posted in Javascript onMarch 24, 2017

偶然间在浏览网页时，发现这样的效果。当鼠标不经意间滑过tab时并不会切换，当鼠标停留在上面一段时候后才会切换。

个人觉得用户体验不错，优点是1.当用户只是滑过标签，并不需要切换，而此时如果切换标签需要请求数据时，会避免不必要的异步请求；2.避免页面在用户不需要的时候切换跳动，影响用户体验。

网上查阅了几个方法，发现下面的方法更简洁有效。整理下来，供以后参考。

其中的重点是那段js代码：原理是，通过hover的时候设置定时器，延迟执行切换方法，离开时，清楚计时器。当hover的时间小于延迟时间时，会清楚计时器，不会执行切换方法。仅当停留时间大于延迟时间才会切换。这样能有效避免滑过tab触发切换事件。

复制代码

<!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 style="width: 300px;margin-left: 300px;" 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 style="display: none;">tab2的内容<br>tab2的内容<br>tab2的内容<br></div>
      </div>
    </div>
  </body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js鼠标经过tab选项卡时实现切换延迟

- Author -

心悦诚服555

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

一页面多XMLHttpRequest对象

Jan 22 Javascript

jquery的trigger和triggerHandler的区别示例介绍

Apr 20 Javascript

使用GruntJS构建Web程序之Tasks（任务）篇

Jun 06 Javascript

在JavaScript中正确引用bind方法的应用

May 11 Javascript

JS出现失效的情况总结

Jan 20 Javascript

javascript简单链式调用案例分析

May 10 Javascript

JavaScript中document.referrer的用法详解

Jul 04 Javascript

js实现1,2,3,5数字按照概率生成

Sep 12 Javascript

微信小程序模板（template）使用详解

Jan 31 Javascript

Vue起步(无cli)的啊教程详解

Apr 11 Javascript

详解Vue中的基本语法和常用指令

Jul 23 Javascript

原生js实现自定义滚动条

Jan 20 Javascript

详解angular2实现ng2-router 路由和嵌套路由

Mar 24 #Javascript

JS实现向iframe中表单传值的方法

Mar 24 #Javascript

JS正则替换去空格的方法

Mar 24 #Javascript

原生js封装自定义滚动条

Mar 24 #Javascript

fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法

Mar 24 #Javascript

jQuery实现鼠标经过显示动画边框特效

Mar 24 #jQuery

JS得到当前时间的方法示例

Mar 24 #Javascript