新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
jQuery如何實現(xiàn)仿京東防抖動菜單效果-創(chuàng)新互聯(lián)
小編給大家分享一下jQuery如何實現(xiàn)仿京東防抖動菜單效果,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
本文實例講述了jQuery實現(xiàn)仿京東防抖動菜單效果。分享給大家供大家參考,具體如下:
完整代碼:
www.jb51.net jQuery仿京東菜單 防抖動
使用本站HTML/CSS/JS在線運行測試工具:http://tools.jb51.net/code/HtmlJsRun,可得到如下測試運行效果:
問題:鼠標第一次移入的時候是不需要延遲的,所以加入了mouseFlag
優(yōu)化后的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之后又一個優(yōu)秀的JavaScript代碼庫,能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫,以便快速開發(fā)網(wǎng)站。
以上是“jQuery如何實現(xiàn)仿京東防抖動菜單效果”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
本文名稱:jQuery如何實現(xiàn)仿京東防抖動菜單效果-創(chuàng)新互聯(lián)
當前地址:http://fisionsoft.com.cn/article/hjpoj.html