jQuery實現帶延時功能的水平多級菜單效果【附demo源碼下載】
更新時間：2016年09月21日 10:50:45 作者：webdm
這篇文章主要介紹了jQuery實現帶延時功能的水平多級菜單效果,可實現響應鼠標事件延時展示菜單的功能,涉及jQuery結合時間函數動態(tài)操作頁面元素屬性的相關技巧,需要的朋友可以參考下
本文實例講述了jQuery實現帶延時功能的水平多級菜單效果。分享給大家供大家參考，具體如下：
運行效果圖如下：
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery實現的一款帶延時功能的水平多級菜單</title>
<style type="text/css" media="screen">
/*<![CDATA[*/
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Verdana", sans-serif;
font-size: 11px;
background: #fff;
color: #333;
}
h1, h2, h3, h4, h5, h6, p, ul, li {
font-size: 1em;
margin: 0;
padding: 0;
}
div#banner {
background: transparent url(images/mega.gif) top left no-repeat;
padding-top: 12px;
padding-bottom: 36px;
}
div#banner h1, div#menu h2 {
margin: 0;
padding: 0;
}
div#banner h1 a {
display: block;
width: 270px;
height: 120px;
}
div#banner h1 a span, div#banner .skip {
position: absolute;
top: -10000px;
left: -10000px;
}
ul#menu {
background: #940;
color: #fff;
margin: 0;
padding: 0.3em 0em;
}
ul#menu li {
display: inline;
margin: 0.1em 1em;
position: relative;
}
ul#menu h2, ul#menu h3 {
font-size: 100%;
font-weight: normal;
display: inline;
}
ul#menu li a {
color: #fff;
text-decoration: none;
padding: 0 0.4em;
}
ul#menu li a:hover {
text-decoration: underline;
}
ul#menu li.mega a {
background: transparent url(images/arrow1.gif) center right no-repeat;
padding: 0 1.2em;
}
ul#menu li.mega a:hover {
text-decoration: underline;
}
ul#menu div {
display: none;
}
ul#menu li.mega div {
border: 1px solid #dda;
width: 18em;
position: absolute;
top: 1.6em;
left: 0em;
padding: 1.3em;
background: #ffc;
color: #930;
}
ul#menu li.hovering div {
display: block;
}
ul#menu li.mega div a {
color: #300;
padding: 0;
background-image: none;
text-decoration: underline;
}
ul#menu li div a.more {
color: #390;
font-weight: bold;
}
ul#menu div h3 {
color: #f70;
font-weight: bold;
font-size: 1.1em;
}
ul#menu div p {
margin: 0 0 0.8em 0;
padding: 0;
}
/*]]>*/
</style>
<script src="jquery-1.7.2.min.js" type="text/javascript" charset="utf-8">
</script>
<script type="text/javascript" charset="utf-8">
(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev]);};var handleHover=function(e){var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(p&&p!=this){try{p=p.parentNode;}catch(e){p=this;}}if(p==this){return false;}var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);}if(e.type=="mouseover"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return this.mouseover(handleHover).mouseout(handleHover);};})(jQuery);
</script>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
$(document).ready(function() {
function addMega(){
$(this).addClass("hovering");
}
function removeMega(){
$(this).removeClass("hovering");
}
var megaConfig = {
interval: 500,
sensitivity: 4,
over: addMega,
timeout: 500,
out: removeMega
};
$("li.mega").hoverIntent(megaConfig)
});
//]]>
</script>
</head>
<body>
<div id="banner">
<h1>
<a href="#"><span>Mega Shop</span></a>
</h1><a class="skip" href="#content">Skip navigation</a>
<ul id="menu">
<li>
<h2>
<a href="#">主頁</a>
</h2>
<div>
Latest news, special deals, and more...
</div>
</li>
<li class="mega">
<h2>
<a href="#">關于他</a>
</h2>
<div>
<h3>
Menswear
</h3>
<p>
<a href="#">Shirts</a>, <a href="#">T-shirts</a>, <a href="#">Accessories</a>, <a href="#">More...</a>
</p>
<h3>
Gifts
</h3>
<p>
<a href="#">Sporting goods</a>, <a href="#">Gadgets</a>, <a href="#">More...</a>
</p>
<h3>
Clearance!
</h3>
<p>
40% off all photo accessories this weekend only. <a href="#">Don't miss out!</a>
</p><a href="#" class="more">More stuff for him...</a>
</div>
</li>
<li class="mega">
<h2>
<a href="#">我是誰</a>
</h2>
<div>
<h3>
Ladieswear
</h3>
<p>
<a href="#">Tops</a>, <a href="#">Pants</a>, <a href="#">Skirts</a>, <a href="#">T-shirts</a>, <a href="#">More...</a>
</p>
<h3>
Gifts
</h3>
<p>
<a href="#">Sporting goods</a>, <a href="#">Gadgets</a>, <a href="#">More...</a>
</p>
<h3>
Shop Now for Mother's Day!
</h3>
<p>
Earlybird Mother's Day specials. <a href="#">Shop early, save on shipping!</a>
</p><a href="#" class="more">More stuff for her...</a>
</div>
</li>
<li class="mega">
<a href="#">Stuff for kids</a>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</li>
<li class="mega">
<a href="#">Stuff for pets</a>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</li>
</ul>
</div>
<p>
<a id="content" name="content"></a>
</p>
</body>
</html>
完整實例代碼點擊此處本站下載。
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
這篇文章主要介紹了jquery隔行換色效果實現方法,涉及even及odd選擇器的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
本文給大家分享一段簡單的jquery代碼實現一個簡單易懂的彈出框，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-07-07
今天要為大家紹一款由jquery實現的鼠標單擊出現水波特效。用鼠標點擊頁面,你可以看到頁面不斷出面水波紋效果。然后水波紋漸漸消失。效果非常不錯2016-04-04
jquery3和layui沖突導致使用layui.layer.full彈出全屏iframe窗口時高度152px問題
這篇文章主要介紹了解決jquery3和layui沖突導致使用layui.layer.full彈出全屏iframe窗口時高度152px問題,需要的朋友可以參考下2019-05-05
最近，項目使用了JqGrid，但需要打印Grid里面的數據。使用的是CSS屬性中的Media媒體類型來控制打印樣式。2011-05-05
jquery.validation.js在前端驗證中使用起來非常方便,提供的功能基本上能滿足大部分驗證需求，下面我們就來仔細研究下這款jQuery插件的具體使用方法。2015-04-04
本篇文章主要介紹了jQuery使用EasyUi實現三級聯動效果，實例使用EasyUi實現三級聯動技巧，非常具有實用價值，需要的朋友可以參考下。2017-03-03
Jquery Ajax學習實例4 向WebService發(fā)出請求，返回實體對象的異步調用
Jquery Ajax學習實例4-向WebService發(fā)出請求，返回實體對象的異步調用2010-03-03
基于Jquery和CSS3制作數字時鐘附源碼下載(CSS3篇)
數字時鐘在web倒計時，web鬧鐘效果以及基于html5的web app中，本文給大家介紹基于jquery和css3制作數字時鐘附源碼下載，感興趣的朋友來看看吧2015-11-11
juqery 學習之三 選擇器 簡單 內容，學習jquery的朋友可以參考下。2010-11-11