jQuery实现带延迟效果的滑动菜单代码


Posted in Javascript onSeptember 02, 2015

本文实例讲述了jQuery实现带延迟效果的滑动菜单代码。分享给大家供大家参考。具体如下:

这是一款基于jQuery的滑动菜单,鼠标移到某菜单项上,菜单的背景可以滑动过来,平滑的滑动效果,炫动的导航效果,相比没有动画的菜单,这款菜单真的挺不错哦。

先来看看运行效果截图:

jQuery实现带延迟效果的滑动菜单代码

在线演示地址如下:

具体代码如下:

<!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>
<title>jQuery实用炫动的导航效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.nav{width:960px;text-align:center;background:#06F;margin:0 auto;position:relative;}
.nav a{width:104px;height:41px;line-height:41px;display:inline-block;margin-right:30px;position:relative;z-index:11111;color:#FFF;}
.nav_bj{background:#F00;width:104px;height:41px;position:absolute;top:0;z-index:111;left:210px;}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 var xxx,re;
 $(".nav a").mouseover(function(){
  xxx=$(this).position().left;
  $(".nav_bj").animate({left:xxx})
  clearTimeout(re);
  }).mouseout(function(){
   clearTimeout(re);
   re=setTimeout(function(){
    $(".nav_bj").animate({left:210})
   },500);
  })
 })
</script>
</head>
<body>
<div class="nav">
<a href="#">首页</a>
<a href="#">三水点靠木</a>
<a href="#">脚本下载</a>
<a href="#">网页特效</a>
<div class="nav_bj"></div>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
Javascript 生成指定范围数值随机数
Jan 09 Javascript
JavaScript 对象成员的可见性说明
Oct 16 Javascript
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
使用js检测浏览器的实现代码
May 14 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 #Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 #Javascript
js实现拉幕效果的广告代码
Sep 02 #Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 #Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 #Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 #Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 #Javascript
You might like
用文本作数据处理
2006/10/09 PHP
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
隐性调用php程序的方法
2015/06/13 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
react redux入门示例
2018/04/19 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
python关闭windows进程的方法
2015/04/18 Python
Python 操作文件的基本方法总结
2017/08/10 Python
django实现用户登陆功能详解
2017/12/11 Python
python 读入多行数据的实例
2018/04/19 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
通过代码实例了解Python异常本质
2020/09/16 Python
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
护士毕业实习感言
2014/03/05 职场文书
报关报检委托书
2014/04/08 职场文书
国庆节慰问信
2015/02/15 职场文书
煤矿安全保证书
2015/02/27 职场文书
入党后的感想
2015/08/10 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python