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

2024-02-09 05:32:21

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

这是一款带滑动条的jQuery滑动菜单，菜单下边有一个蓝色的线条，鼠标移上哪里它就跟向哪里，可以指引当前菜单的位置，另外，动画效果是基于jquery的animate()，对此有兴趣学习的正好可参考下代码。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-move-buttom-line-style-codes/

具体代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>带滑动条的jQuery滑动菜单</title>
<style>
body{ font:12px/1.5 Arial,\5b8b\4f53,sans-serif;background:#fff; color:#333; position:relative}
.header { width:990px; min-width:990px; margin:0 auto; height:68px; position:relative; z-index:200; overflow:hidden}
.headerTab { height:44px; padding:24px 0 0 0; position:relative; width:990px; min-width:990px; margin:0 auto; }
.headerTab a { padding:0 5px; float:left; font-size:14px; color:#333; height:42px; overflow:hidden; line-height:44px;font-family:\5FAE\8F6F\96C5\9ED1,\5B8B\4F53; margin-left:10px; display:inline}
.headerTab a:hover { text-decoration:none; color:#333}
.headerTab .tabLine { position:absolute; top:66px; height:2px; background:#35b0f2; left:0; width:100%; overflow:hidden; font-size:0; line-height:0;}
</style>
</head>
<body>
<div class="headerTab" id="headerTab"><a href="#" title="">我们</a><a href="#" title="">下载中心</a><a href="#" title="">最新更新</a><a href="#" title="">广告中心</a><a href="#" target="_blank" title="">Delphi源码</a><a href="#" target="_blank" title="">VC++源码</a><a href="#" title="">更新日志</a><i class="tabLine"></i></div>
</body>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
var headerTabArray = $("#headerTab a"),headTabLine = $("#headerTab .tabLine"),tabIndex,headerTabArrayLength = headerTabArray.length,headerTabWidthArray = [],headerTabPositonArray = [],defaultNum = 0;
for(var i=0;i<headerTabArrayLength;i++){
  headerTabWidthArray[i] = headerTabArray.eq(i).width() + 10;
  headerTabPositonArray[i] = headerTabArray.eq(i).position().left + 10;
}
headerTabArray.mouseover(function(){
  $("#headerTab i:animated").stop();
  tabIndex = $(this).index();
  headTabLine.animate({width:headerTabWidthArray[tabIndex],left:headerTabPositonArray[tabIndex]},300);
})
headerTabArray.mouseout(function(){
  $("#headerTab i:animated").stop();
  tabIndex = $(this).index();
  headTabLine.animate({width:headerTabWidthArray[defaultNum],left:headerTabPositonArray[defaultNum]},300);
})
defaultNum = 0;
headTabLine.animate({width:headerTabWidthArray[defaultNum],left:headerTabPositonArray[defaultNum]},300);
</script>
</html>

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

jquery实现标题字体变换的滑动门菜单效果

本文实例讲述了jquery实现标题字体变换的滑动门菜单效果.分享给大家供大家参考.具体如下: 这里使用jquery字体会变大的网页滑动门菜单,当把鼠标放在"门"上的时候,门内的菜单字体会变大变色,对应的内容同时切换,不知如何形容本效果,所以就叫字体会变的滑动门吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-font-cha-tab-menu-style-codes/ 具体代码如下: <!DOCTYPE html
jquery实现左右滑动菜单效果代码

本文实例讲述了jquery实现左右滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了三种背景颜色左右滑动jquery菜单导航效果,IE下有问题,本菜单使用了CSS3的部分属性,因此建议使用火狐或Chrome等浏览器获取最佳效果.当把鼠标移到菜单上的时候,对应菜单项的背景会变化,而且本菜单具有圆角的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-right-move-style-menu-codes/ 具
基于jQuery实现的向下滑动二级菜单效果代码

本文实例讲述了基于jQuery实现的向下滑动二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款使用jQuery制作向下滑动的二级菜单,本二级菜单带有动画效果,而且比较流畅,鼠标放在一级菜单上,就可以向下滑出二级子菜单,相对实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-down-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD
jQuery实现带延迟效果的滑动菜单代码

本文实例讲述了jQuery实现带延迟效果的滑动菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery的滑动菜单,鼠标移到某菜单项上,菜单的背景可以滑动过来,平滑的滑动效果,炫动的导航效果,相比没有动画的菜单,这款菜单真的挺不错哦. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-delay-style-menu-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/
jquery实现最简单的滑动菜单效果代码

本文实例讲述了jquery实现最简单的滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一款最简单的jQuery下拉滑出菜单,jQuery代码实现,这里没有过多的去修饰菜单,仅是一些基本的实现,特别是对学习jQuery是个不错的参考实例,这里使用了一个jquery封装库文件jquery.tools.min.js,从外部引入,测试时候可能会因载入不成功而看不到效果,刷新一下网页即可解决此问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/
jQuery实现MSN中文网滑动Tab菜单效果代码

本文实例讲述了jQuery实现MSN中文网滑动Tab菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现Msn中文网的滑动滑动门代码,利用jQuery实现的效果,代码很巧妙,就是利用一个绝对定位的层来实现移动效果,但是体验度大幅提升了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-msn-tab-menu-style-codes/ 具体代码如下: <!DOCTYPE html> <html>
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/xhtm
jQuery实现带幻灯的tab滑动切换风格菜单代码

本文实例讲述了jQuery实现带幻灯的tab滑动切换风格菜单代码.分享给大家供大家参考.具体如下: 这是一款很不错的TAB滑动切换效果,jQuery带幻灯的tab滑动切换风格菜单导航条,点击上方的文字,下边就向左或向右滑动切换,动画效果的TAB选项卡. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-flash-style-tab-cha-menu-codes/ 具体代码如下: <!DOCTYPE html> <head&g
jQuery实现菜单式图片滑动切换

jQuery菜单式图片滑动切换是一款天猫官方网站的鼠标滑过图片切换导航菜单特效. 复制代码代码如下: $(function(){ // floorCon-slide $(".floorCon-slide .floorConSlideImgNav li span").css({opacity:0.95}) $(".floorCon-slide .floorConSlideImgNav li.hover").find("span&qu
jQuery实现带滑动条的菜单效果代码

本文实例讲述了jQuery实现带滑动条的菜单效果代码.分享给大家供大家参考.具体如下: 这是一款带滑动条的jQuery滑动菜单,菜单下边有一个蓝色的线条,鼠标移上哪里它就跟向哪里,可以指引当前菜单的位置,另外,动画效果是基于jquery的animate(),对此有兴趣学习的正好可参考下代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-move-buttom-line-style-codes/ 具体代码如下: <!DOCTYPE
jQuery实现的淡入淡出二级菜单效果代码

本文实例讲述了jQuery实现的淡入淡出二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款加入了jQuery的菜单,一个看似平凡菜单突然有味道.有生机起来,这里将jQuery1.3.2引用进来,让弹出的二级菜单具备淡入淡出的效果,虽然就效果本身来说并不起眼,但比起无任何效果的菜单,从体验上来说,已经强了很多倍. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-out-2l-nav-menu-codes/ 具
jquery+CSS3模拟Path2.0动画菜单效果代码

本文实例讲述了jquery+CSS3模拟Path2.0动画菜单效果代码.分享给大家供大家参考.具体如下: CSS3实现的仿手机软件菜单,动画菜单,注意的地方,小按钮位移后有个缓冲,每个小按钮缓冲的距离不一样,每个小按钮位移的时间有间隔,处理好这些细节才能体现出灵动的效果. CSS3代码:(请用非IE标准浏览器访问)由于代码运行框缺陷,请先刷新一下页面动画运行更流畅.Path菜单的小按钮本来应该也可以旋转的,但CSS3动画的位移和旋转同时出现时不知道为何旋转就没效果了,所以这里没弄出来,感兴趣的朋
jQuery实现的经典竖向伸缩菜单效果代码

本文实例讲述了jQuery实现的经典竖向伸缩菜单效果代码.分享给大家供大家参考.具体如下: 这是一款使用jquery1.3.2制作的竖向伸缩菜单,每点击一次主菜单,会拉开出对应的二级菜单,再次点击会合拢,效果非常不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-jd-v-show-menu-demo-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
jQuery实现的多级下拉菜单效果代码

本文实例讲述了jQuery实现的多级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery多级下拉菜单,在支持html5的浏览器中测试你会发现本菜单很智能,会自动判断浏览器边界来改变下拉菜单的显示方向,在ie下没发现此效果.整体上来看,和Windows系统的"经典"主题时的菜单风格特别相似,配合图片,整体效果还是相当有专业水准的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-nlevel-nav-me
jQuery实现的fixedMenu下拉菜单效果代码

本文实例讲述了jQuery实现的fixedMenu下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了仿Google风格的下拉菜单,其核心实际上是jquery.fixedMenu菜单,使用了jquery.fixedMenu.js和fixedMenu_style.css文件,已在代码中加注释,你可以从本代码中分享现这两个文件,然后重新引用.本菜单在鼠标点击主菜单的时候可向下显示二级子菜单,在火狐或Chrome浏览器下,还可显示菜单阴影效果. 运行效果截图如下: 在线演示地址如下: htt
使用Javascript开发sliding-nav带滑动条效果的导航插件

本文介绍如何使用纯Javascript来开发一款简单的JS插件,本插件可以实现鼠标悬停在导航上时,下方的滑动条自动从当前菜单滑动到所选菜单当中去. 本项目的源代码寄宿于GitHub,记得点小星星哦: https://github.com/dosboy0716/sliding-nav 一.前言效果如下图: 二.使用方法本插件只需要如下的三步,就可以在您的项目中使用: 1.在</body>标记结束前,引用sliding-nav.js文件 2.在需要滑动条的菜单容器上加类名 sliding-na

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

相关推荐

随机推荐