jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】


Posted in Javascript onSeptember 21, 2016

本文实例讲述了jQuery实现带延时功能的水平多级菜单效果。分享给大家供大家参考,具体如下:

运行效果图如下:

jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
jQuery 版元素拖拽原型代码
Apr 25 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 Javascript
AngularJS 单元测试(一)详解
Sep 21 #Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 #Javascript
AngularJS  ng-table插件设置排序
Sep 21 #Javascript
BooStrap对导航条的改造实践小结
Sep 21 #Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 #Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 #Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 #Javascript
You might like
PHP数据类型的总结分析
2013/06/13 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
layui导出所有数据的例子
2019/09/10 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
python生成随机mac地址的方法
2015/03/16 Python
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
python中join()方法介绍
2018/10/11 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
Python3的socket使用方法详解
2020/02/18 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
应聘面试自我评价
2014/01/24 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
身边的榜样活动方案
2014/08/20 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
结婚主持人致辞
2015/07/28 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python