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>

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

Javascript 相关文章推荐
JavaScript关于select的相关操作说明
Jan 13 Javascript
Js 随机数产生6位数字
May 13 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 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
You might like
使用php测试硬盘写入速度示例
2014/01/27 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
《童趣》教学反思
2014/02/19 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
质量整改通知单
2015/04/21 职场文书
信用卡催款律师函
2015/05/27 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书