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

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

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-move-buttom-line-style-codes/

具体代码如下：

！DOCTYPE HTMl HTMl ToolHeeta charset=' GB 2312 '标题带滑动条的jQuery滑动菜单/title style body { font :12 px/1.5 Arial，5b8b4f53，无衬线；背景# fffcolor: # 333位置：relative} .标题{宽度：990像素最小宽度：990像素；margin:0汽车高度：68 px位置：相对；z指数：200;飞越(隐藏的).header tab { height :44 xpadding :24 px 0 0 0位置：相对；宽度宽度：990像素最小宽度：990像素；margin:0 auto}。header tab a { padd :0 5pxfloat 3360 left font-size :14 px；颜色： # 333height:42px飞越：隐藏；线高：44 px字体系列： 5FAE 8F6F 96 C5 9ED1、 5B8B 4F53边距-左侧：10 pxdisplay:inline} .页眉选项卡a :悬停{ text-decoration : nonecolor:#333} .标题b .tabLine { position : absolutetop :66 pxh three :2 px背景技术： # 35b 0 F2左转：0宽度：100%;飞越：隐藏；字号：0；线高：0;}/style/header dydiv class=' header tab ' id=' header tab ' a href=' # ' title=' '我们/aa href='#' title=' '下载中心/aa href='#' title=' '最新更新/aa href='#' title=' '广告中心/aa href=' # ' target=' _ blank ' title=' ' Delphi源码/aa href=' # ' target=' _ blank ' title=' VC '源码/aa href='#' title=' '更新日志/ai类=' tabLine '/I/div/body脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/脚本var脚本header tabary=$(' # header tab a ')，header tabLine=$(' # header tab .tabLine ')、tabIndex、header tabarlaylength=header tabarlay。长度、headerTabWidthArray=[]、headerTabPositonArray=[]、defaultNum=0；for(var I=0；iheadtabararraylengthi){ header tab width array[I]=header tabarray。方程式(一).宽度()10;header tab positionarray[I]=header tab array。方程式(一).位置()。左10;} HeadertBarray。将鼠标悬停在(function(){ $(' # HeadertAb I :动画')上.stop()；tabIndex=$(this).index()；塔博林头。动画({ width : header tab width array[tabIndex]，left : header tab positionarray[tabIndex]}，300)；})头表。鼠标移出(函数(){ $(' # header tab I :动画').stop()；tabIndex=$(this).index()；塔博林头。动画({ width : header tab width array[DefaultNum]，left : header tab position array[DefaultNum]}，300)；})DefaultNum=0；塔博林头。动画({ width : header tab width array[DefaultNum]，left : header tab position array[DefaultNum]}，300)；/script/html希望本文所述对大家的jquery程序设计有所帮助。