本文实例讲述了支持背景图片上下滑动的竖向jQuery菜单导航特效代码，分享给大家供大家参考。具体如下：运行效果截图如下：

具体代码如下

html xmlns=' http://www。w3。org/1999/XHTML ' hearta charset=' GB 2312 '标题左边跟随鼠标滑动导航/titlemeta名称='关键字'内容='滑动导航/meta name=' description ' content='左边跟随鼠标滑动导航/style/* -重置-*/html { font-size : 100%；-网页套件-文字-尺寸-调整：100%；-ms-text-size-调整：100%；* overflow : auto _ overflow-x :隐藏；} body { margin:0}p、ul、ol、form、dl、h1、h2、h3、h4、h5、h6 { margin-top :0；保证金-底部：0;}dl、DD {边距-左侧：0；}ul，ol { padding-left :0；*左边距-:0;列表样式类型：无；} ul li { * zoom:1*垂直对齐：底部；}em、var、cite、I { font-style : normal；}小{ font-size : inherit}s，a { text-decoration : none} : focus { outline : none } block quote，q { quote : none margin :0 }表格{边框-折叠：折叠；边框间距：0;空细胞3360秀；/*表-布局：固定；*/}img，iframe { border:none}img {垂直对齐：顶部；女士插值-mode:双三次；/*ie7防止图片缩小失真的*/}/* - 竖向菜单（非必需) - */.bl-vernav Li {边框-底部：1 px实心# ddd保证金-底部：-1px；填充-top :1 px；}.bl-vernav a {显示：块；高度：20 px线高：20 pxpadding:10px 16px }。bl-vernav a :悬停{背景： # f8f8文本装饰：无；}/*.bl-vernav .cur a { background : # 428 bcacolor : # fff } */。bl-vernav-order { border :1 px solid # DDD；}.vernav-level Li Li {边框-左侧：无；右边框：无；}.vernav级里阿利{左填充：40像素；}.维诺夫级当前.一个{ background: # F8F8F8 }。维那夫级别的李cur a { background : # f8f8 }/* DIY */.bl-vernav-wrap {相对位置：}.bl-vernav包装。边线{ position : absolute eleft :-6px；top:0z索引：1;线高：0;字号：0；边框-左侧：#FF5F3E实心7px背景-颜色： # F8F 8；}.bl-vernav {位置：相对；z索引：2;}.bl-vernav a :悬停{底色：透明；}.demo box { width :460 pxfont-size :14 px；color : # 333 font-family : ' Hiragino Sans GB '，' Microsoft Yahei '，' WenQuanYi Micro Hei '，SimSun，Tahoma，Arial，Helvetica，THeiti} a { color: # 333文本装饰：无；}/style/head body style=' padd :50 px；div class='demobox' h1 class='h3 '左边条纹跟随鼠标滑动导航/h1 br/div class=' bl-vernav-wrap ' div class='边线/div ul class=' bl-vernav vernav-level ' lia href=' # ' class=' one '导航菜单/a/Li Li神探夏洛克/a ul lia href='# '海贼王/a/li lia href='# '海贼王/a/li lia href='# '海贼王/a/li /ul /li lia神探夏洛克/a/li lia href='#' class='one '神探夏洛克/a/li lia href='#' class='one '神探夏洛克/a/Li/ul/div/div脚本src=' http :http://cdn。bootscs。com/jquery/2。1 .4/jquery。量滴js '/script script $(function(){ var verNav=$().bl-vernav ')，//第一层ul .line=verNav。姐弟('。边线'),//左边条纹线verNavFirst=vernav。儿童('李：第一')，//第一层保险商实验所中第一个li curY=verNav.children('li.cur ').位置()。顶部；排队。高度(VernavFirst。Outhheight()-1).宽度(vernavfirst。out width())；//设置辅助线初始化高度和宽度，也可以直接用钢性铸铁设置好，这里就不用射流研究…计算了verNav.find('li ').鼠标输入(function(){ var thisY=$(this)).位置()。顶部；停止(真，真).动画({top:thisY}，200)；返回false }).end().鼠标离开(函数(){ line。停止(真的，真的).动画({top:curY}，300) }).触发器(“鼠标离开”)；});/脚本/正文/html希望本文所述对大家学习jquery程序设计有所帮助。