jQuery实现仿京东防抖动菜单效果示例

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

完整代码：

！DOCTYPE htmlhtmlheadtitlewww.jb51.net jQuery仿京东菜单/title meta charset=' utf-8 '脚本src=' http :3358 libs。百度。com/jquery/2。0 .0/jquery。量滴js '/脚本样式类型=' text/CSS ' * { padd : 0；保证金： 0；}李{列表式：无；} a { color: # 555}。菜单{ width: 220pxborder: 2px固体# 333;相对位置：}.菜单项{ height: 47px左填充左侧：20像素线高： 47px背景-颜色： #费BF3边框-底部： 1px实心# f0bfd3}。menu_item.current{背景-color : # fff；}.menu _ cont { position :绝对值；宽度： 500像素；高度： 150像素；top : 0；left : 220 pxpadding : 15pxborder : 1px固体# 666;}/style/head dyh 2防抖动/H2 div=' 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 h3a href=' 618，刘强东笑了，很多人哭了/a/h3 /li li h3a href=' '普通人如何分享人民币增值红利/a/h3 /li li h3a href=' '大都市里藏板房小学闷热无比/a/Li/ul/div=' menu _ cont _ list ' ul Li h3a href=' '中国炼油产能过剩超亿吨油价迫近四元降回到十年前/a/h3 /li li h3a href=' '银行大幅上调首套房贷利率这些人最受影响/a/h3 /li li h3a href=' '江南大范围强降雨再次来袭今明北方旱区多雷阵雨/a/Li/ul/div=' menu _ cont _ list ' ul Li h3a href=' '京郊特产组团进超市类似活动将在全市推开/a/h3 /li li h3a href=' '北京某高档小区地下二层防空洞改群租房/a/h3 /li li h3a href=' '北京市民踊跃收听收看市党代会开幕直播/a/Li/ul/div=' menu _ cont _ list ' ul Li h3a href=' '英国推出"钱味香水":随时感受钞票味儿/a/h3 /li li h3a href=' '美国是如何买下阿拉斯加的？ 为何俄国悔不当初？/a/h3 /li li h3a href=' '将增近4000人，美国为何欲大幅增兵阿富汗？/a/Li/ul/div/div脚本类型='text/javascript'$(文档)。ready(function(){ var $menu=$(').菜单');var $menuItem=$(' .菜单项');var $menuCont=$(' .menu _ cont’)；var $menuContList=$(' .menu _ cont _ list ')var MenuTimer；$menuItem.on('mouseenter '，function(){ var self=$(this)；menuTimer=setTimeout(function(){ self。add class(' current ')；自我。姐弟()。removeClass(“”当前');$ MenuCont。show()；var _ index=self。index()；$menuContList.eq(_index).show()；$menuContList.eq(_index).兄弟姐妹()。hide()；},500) }).on('mouseleave '，function(){ if(MenuTimer){ clear time out(MenuTimer)；} }) $menu.on('mouseleave '，function(){ $ menucont。hide()；})})/脚本/正文/html使用本站HTML/CSS/JS在线运行测试工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下测试运行效果：

问题：鼠标第一次移入的时候是不需要延迟的，所以加入了鼠标标志

优化后的射流研究…为

$(function(){ var _ CatTimer；var _ mouseflag var $ menu=$(' # menu ')；var $menuItem=$menu.find(' .菜单_列表’).儿童(“李”)；//菜单var $menuCont=$menu.find ' .menu _ cont’)；//容器var $ menuContItem=$ menucont。儿童(' div ')；//$ MenuConnt。hide()；//默认隐藏容器窗口$menuItem.on('mouseenter '，function(){ var self=$(this)；if(！_鼠标标志){ show cont(self)；_ mouse flag=true } else { _ CatTiMer=SetTiMeout(function(){ Showcont(self)}，300) }).on('mouseleave '，function(){ if(_ CatTimer){ clear time out(_ CatTimer)；} }) $menu.on('mouseleave '，function(){ $ menucont。hide()；$ MenuItem。移除类(“当前”)；})var show cont=function(self){ self。add class(' current ')；自我。姐弟()。removeClass(“”当前');$ MenuCont。show()；//显示容器窗口var _ index=self。index()；//获取位置$menuContItem.eq(_index).show()；$menuContItem.eq(_index).兄弟姐妹()。hide()；}})更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。