jQuery实现仿京东防抖动菜单效果示例


Posted in jQuery onJuly 06, 2018

本文实例讲述了jQuery实现仿京东防抖动菜单效果。分享给大家供大家参考,具体如下:

完整代码:

<!DOCTYPE html>
<html>
<head>
<title>3water.com jQuery仿京东菜单</title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
*{
  padding: 0;
  margin: 0;
}
li{
  list-style: none;
}
a{
  color:#555;
}
.menu{
  width: 220px;
  border: 2px solid #333;
  position: relative;
}
.menu_item{
  height: 47px;
  padding-left:20px;
  line-height: 47px;
  background-color:#feebf3;
  border-bottom: 1px solid #f0bfd3;
}
.menu_item.current{
  background-color: #fff;
}
.menu_cont{
  position: absolute;
  width: 500px;
  height: 150px;
  top: 0;
  left: 220px;
  padding: 15px;
  border: 1px solid #666;
}
</style>
</head>
<body>
<h2>防抖动</h2>
<div class="menu">
  <ul class="menu_list">
    <li class="menu_item"><a href="">热点要闻</a></li>
    <li class="menu_item"><a href="">个性推荐</a></li>
    <li class="menu_item"><a href="">北京新闻</a></li>
    <li class="menu_item"><a href="">环球视野</a></li>
  </ul>
  <div class="menu_cont" style="display:none">
    <div class="menu_cont_list">
      <ul>
        <li>
          <h3><a href="">618,刘强东笑了,很多人哭了</a></h3>
        </li>
        <li>
          <h3><a href="">普通人如何分享人民币增值红利</a></h3>
        </li>
        <li>
          <h3><a href="">大都市里藏板房小学闷热无比 </a></h3>
        </li>
      </ul>
    </div>
    <div class="menu_cont_list">
      <ul>
        <li>
          <h3><a href="">中国炼油产能过剩超亿吨 油价迫近4元降回到十年前</a></h3>
        </li>
        <li>
          <h3><a href="">银行大幅上调首套房贷利率 这些人最受影响</a></h3>
        </li>
        <li>
          <h3><a href="">江南大范围强降雨再次来袭 今明北方旱区多雷阵雨</a></h3>
        </li>
      </ul>
    </div>
    <div class="menu_cont_list">
      <ul>
        <li>
          <h3><a href="">京郊特产组团进超市 类似活动将在全市推开</a></h3>
        </li>
        <li>
          <h3><a href="">北京某高档小区地下二层防空洞改群租房</a></h3>
        </li>
        <li>
          <h3><a href="">北京市民踊跃收听收看市党代会开幕直播</a></h3>
        </li>
      </ul>
    </div>
    <div class="menu_cont_list">
      <ul>
        <li>
          <h3><a href="">英国推出“钱味香水”:随时感受钞票味儿</a></h3>
        </li>
        <li>
          <h3><a href="">美国是如何买下阿拉斯加的?为何俄国悔不当初?</a></h3>
        </li>
        <li>
          <h3><a href="">将增近4000人,美国为何欲大幅增兵阿富汗?</a></h3>
        </li>
      </ul>
    </div>
  </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
  var $menu = $(".menu");
  var $menuItem = $(".menu_item");
  var $menuCont = $(".menu_cont");
  var $menuContList= $(".menu_cont_list")
  var menuTimer;
  $menuItem.on("mouseenter", function(){
    var self = $(this);
    menuTimer = setTimeout(function(){
      self.addClass("current");
      self.siblings().removeClass("current");
      $menuCont.show();
      var _index = self.index();
      $menuContList.eq(_index).show();
      $menuContList.eq(_index).siblings().hide();
    },500)
  }).on("mouseleave", function(){
    if(menuTimer){
      clearTimeout(menuTimer);
    }
  })
  $menu.on("mouseleave", function(){
    $menuCont.hide();
  })
})
</script>
</body>
</html>

使用本站HTML/CSS/JS在线运行测试工具:http://tools.3water.com/code/HtmlJsRun,可得到如下测试运行效果:

jQuery实现仿京东防抖动菜单效果示例

问题:鼠标第一次移入的时候是不需要延迟的,所以加入了mouseFlag

优化后的JS为

$(function(){
  var _catTimer;
  var _mouseflag;
  var $menu = $("#menu");
  var $menuItem = $menu.find(".menu_list").children("li");//菜单
  var $menuCont = $menu.find(".menu_cont");//容器
  var $menuContItem = $menuCont.children("div");//
  $menuCont.hide();//默认隐藏容器窗口
  $menuItem.on("mouseenter", function(){
    var self = $(this);
    if(!_mouseflag){
      showCont(self);
      _mouseflag = true;
    }else{
      _catTimer = setTimeout(function(){
        showCont(self)
      },300)
    }
  }).on("mouseleave", function(){
    if(_catTimer){
      clearTimeout(_catTimer);
    }
  })
  $menu.on("mouseleave",function(){
    $menuCont.hide();
    $menuItem.removeClass("current");
  })
  var showCont = function (self) {
    self.addClass("current");
    self.siblings().removeClass("current");
    $menuCont.show();//显示容器窗口
    var _index = self.index();//获取位置
    $menuContItem.eq(_index).show();
    $menuContItem.eq(_index).siblings().hide();
  }
})

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 #jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 #jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 #jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 #jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 #jQuery
jQuery阻止事件冒泡实例分析
Jul 03 #jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 #jQuery
You might like
Zerg基本策略
2020/03/14 星际争霸
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
PHP执行速率优化技巧小结
2008/03/15 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
Js四则运算函数代码
2012/07/21 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
javascript实现日历效果
2019/06/17 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
Python的垃圾回收机制深入分析
2014/07/16 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
Python中一行和多行import模块问题
2018/04/01 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
使用python模拟高斯分布例子
2019/12/09 Python
Pytorch 实现权重初始化
2019/12/31 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
Python解析微信dat文件的方法
2020/11/30 Python
简单而又朴实的个人求职信分享
2013/12/12 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
2014年征兵标语
2014/06/20 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
七一建党节慰问信
2015/02/14 职场文书
英文辞职信范文
2015/05/13 职场文书