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 相关文章推荐
简明json介绍
Sep 28 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
javascript的push使用指南
Dec 05 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
JavaScript实例 ODO List分析
Jan 22 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
php检测文本的编码
2015/07/26 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
python中的五种异常处理机制介绍
2014/09/02 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
python测试mysql写入性能完整实例
2018/01/18 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
python程序控制NAO机器人行走
2019/04/29 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
python文字转语音实现过程解析
2019/11/12 Python
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
计算机科学系职业生涯规划书
2014/03/08 职场文书
公务员年度考核评语
2014/12/31 职场文书
实施意见格式范本
2015/06/05 职场文书