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中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
js下写一个事件队列操作函数
Jul 19 Javascript
jQuery Tools tab使用介绍
Jul 14 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
vue+mock.js实现前后端分离
Jul 24 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在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
php 常用的系统函数
2017/02/07 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
Array.prototype.slice 使用扩展
2010/06/09 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
js跳转页面方法总结
2014/01/29 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
python实现定时播放mp3
2015/03/29 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
Python3 修改默认环境的方法
2019/02/16 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
python 对xml解析的示例
2021/02/27 Python
法国家具及室内配件店:home24
2017/01/21 全球购物
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
汉森批发:Hansen Wholesale
2018/05/24 全球购物
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
服装厂厂长岗位职责
2013/12/27 职场文书
趣味活动策划方案
2014/02/08 职场文书
留学顾问岗位职责
2014/04/14 职场文书
死亡赔偿协议书
2015/01/28 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers