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插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 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
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
Python中的多重装饰器
2015/04/11 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
python的变量与赋值详细分析
2017/11/08 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
python3.x上post发送json数据
2018/03/04 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
python把1变成01的步骤总结
2019/02/27 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
Python安装Bs4的多种方法
2020/11/28 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
助人为乐表扬信范文
2014/01/14 职场文书
高中打架检讨书
2014/02/13 职场文书
家长通知书家长评语
2014/04/17 职场文书
道德演讲稿
2014/05/21 职场文书
保护环境的标语
2014/06/09 职场文书
终止劳动合同通知书
2015/04/16 职场文书
故意伤害辩护词
2015/05/21 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏