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 相关文章推荐
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 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怎样调用MSSQL的存储过程
2006/10/09 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
python通过索引遍历列表的方法
2015/05/04 Python
python实现简单ftp客户端的方法
2015/06/28 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
python爬虫爬取网页表格数据
2018/03/07 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
python爬虫 正则表达式解析
2019/09/28 Python
python已协程方式处理任务实现过程
2019/12/27 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
保护环境倡议书范文
2014/05/13 职场文书
无私奉献演讲稿
2014/09/04 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
python基础之爬虫入门
2021/05/10 Python
超级详细实用的pycharm常用快捷键
2021/05/12 Python
Python利用FlashText算法实现替换字符串
2022/03/31 Python