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 相关文章推荐
javascript 控制弹出窗口
Apr 10 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
vue-cli脚手架的安装教程图解
Sep 02 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 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 array_intersect()函数使用代码
2009/01/14 PHP
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
详解php中反射的应用
2016/03/15 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
PHP 实现重载
2021/03/09 PHP
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
python中pygame模块用法实例
2014/10/09 Python
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
德国团购网站:Groupon德国
2018/03/13 全球购物
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
日语系毕业求职信
2014/07/27 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
vue基于Teleport实现Modal组件
2021/05/31 Vue.js