平武建站

jQuery如何实现仿京东防抖动菜单效果-创新互联

小编给大家分享一下jQuery如何实现仿京东防抖动菜单效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

成都创新互联公司2013年成立，先为崇明等服务建站，崇明等地企业，进行企业商务咨询服务。为崇明企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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

完整代码：




www.jb51.net jQuery仿京东菜单



*{
  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;
}




防抖动


  
    热点要闻
    个性推荐
    北京新闻
    环球视野
  
  
    
      
    
        
  • 
          
    618，刘强东笑了，很多人哭了
    
        
    • 
        
  • 
          
    普通人如何分享人民币增值红利
    
        
    • 
        
  • 
          
    大都市里藏板房小学闷热无比 
    
        
    • 
      

    
           
            
  •           

    中国炼油产能过剩超亿吨 油价迫近4元降回到十年前

            
    •         
  •           

    银行大幅上调首套房贷利率 这些人最受影响

            
    •         
  •           

    江南大范围强降雨再次来袭 今明北方旱区多雷阵雨

            
    •       
    
           
            
  •           

    京郊特产组团进超市 类似活动将在全市推开

            
    •         
  •           

    北京某高档小区地下二层防空洞改群租房

            
    •         
  •           

    北京市民踊跃收听收看市党代会开幕直播

            
    •       
    
                
   $(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://pwwzsj.com/article/hjpoj.html

其他资讯