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读取XML文件数据并显示的实现代码
Dec 16 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
Javascript基础教程之变量
Jan 18 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
vue组件间通信解析
Mar 01 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
小程序实现录音功能
Sep 22 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/30 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
php自定义时间转换函数示例
2016/12/07 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
JavaScript 学习笔记(六)
2009/12/31 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
Python单元测试简单示例
2018/07/03 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
python中while和for的区别总结
2019/06/28 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
董事长岗位职责
2013/11/30 职场文书
职业规划书如何设计?
2014/01/09 职场文书
三年级语文教学反思
2014/02/01 职场文书
《雨点》教学反思
2014/02/12 职场文书
商业融资计划书
2014/04/29 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
临时租车协议范本
2014/09/23 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS