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插件之validation插件
Mar 29 jQuery
利用jQuery解析获取JSON数据
Apr 08 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 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
PHP4之真OO
2006/10/09 PHP
php桌面中心(四) 数据显示
2007/03/11 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
Python实现的检测网站挂马程序
2014/11/30 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
NumPy排序的实现
2020/01/21 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
判断单链表中是否存在环
2012/07/16 面试题
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
《长城和运河》教学反思
2014/04/14 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
2014年食堂工作总结
2014/11/20 职场文书
郭明义电影观后感
2015/06/08 职场文书
离职信范文
2015/06/23 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
粗暴解决CUDA out of memory的问题
2021/05/22 Python