RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
  
$(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();   }) })

使用本站HTML/CSS/JS在线运行测试工具:http://tools.jb51.net/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是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。

以上是“jQuery如何实现仿京东防抖动菜单效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


分享标题:jQuery如何实现仿京东防抖动菜单效果-创新互联
转载来于:http://xdwzjz.cn/article/hjpoj.html
Top