乐山网站建设

专注高端品牌网站建设行业优质供应商！认准小谭建站！
028-86922220135-1821-9792
  • 首页
  • 网站建设
    网站设计包含服务 网站制作流程 有效沟通方式 售后服务
  • 微信开发
  • 案例展示
    乐山小谭建站公司作品案例展示
  • 新闻资讯
  • 解决方案
  • 小谭建站
  • 联系我们

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

    其他资讯

    售后响应及时

    7×24小时客服热线

    数据备份

    更安全、更高效、更稳定

    价格公道精准

    项目经理精准报价不弄虚作假

    合作无风险

    重合同讲信誉，无效全额退款

    联系我们

    TEL

    135-1821-9792

    028-86922220

    地址：乐山市太升南路288号锦天国际

    快捷导航

    Shortcut

    二维码

    QR CODE

    • 微信公众号

    • 手机端网站

    乐山小谭建站工作室是一家专注从事于高品质视觉体验及互联网设计开发，乐山网站建设，乐山网站设计，乐山网页设计，乐山网站制作，品牌网站建设，营销网站建设，集团网站建设，企业网站建设，外贸网站建设，响应式网站建设，小程序开发，微信开发，企业形象设计，企业宣传视频等服务，小谭建站位于乐山市龙岗区大运软件小镇，小谭建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。
    友情链接 交换友情链接
    响应式网站   网站制作   微信服务号订阅号开发   南充护栏钻孔机   仿古建筑设计   眉山网站建设   域名注册   重庆手机网站建设   手机网站   网站定制   

    Copyright © 2022 青羊区小谭信息技术咨询服务工作室 乐山建站工作室 All Rights Reserved   蜀ICP备2021004003号-25

    Copyright © 2022 青羊区小谭信息技术咨询服务工作室 乐山建站工作室 

    蜀ICP备2021004003号-25