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 相关文章推荐
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
IE8下关于querySelectorAll()的问题
May 13 Javascript
js三种排序算法分享
Aug 16 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
详解vue 图片上传功能
Apr 30 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
使用PHP实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
python flask中静态文件的管理方法
2018/03/20 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
在vscode中配置python环境过程解析
2019/09/28 Python
如何使用repr调试python程序
2020/02/28 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
优秀的毕业生的自我评价
2013/12/12 职场文书
住房公积金接收函
2014/01/09 职场文书
主持词开场白
2014/03/17 职场文书
大学生求职信例文
2014/06/29 职场文书
公司财务部岗位职责
2015/04/14 职场文书
信息技术研修心得体会
2016/01/08 职场文书
解决MySQL报“too many connections“错误
2022/04/19 MySQL
Java 异步任务计算FutureTask
2022/04/28 Java/Android
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python
vue3不同环境下实现配置代理
2022/05/25 Vue.js