本文實例講述了支持背景圖片上下滑動的豎向jQuery菜單導航特效代碼，分享給大家供大家參考。具體如下：
運行效果截圖如下：
具體代碼如下
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="gb2312"><title>左邊跟隨鼠標滑動導航</title><meta name="keywords" content="滑動導航" /><meta name="description" content="左邊跟隨鼠標滑動導航" /><style>/*---------重置---------*/html { font-size: 100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;*overflow:auto; _overflow-x:hidden;}body { margin:0;}p, ul, ol, form, dl, h1, h2, h3, h4, h5, h6 { margin-top:0; margin-bottom:0;}dl, dd { margin-left:0;}ul, ol { padding-left:0;*margin-left:0; list-style-type: none;}ul li {*zoom:1;*vertical-align:bottom;}em, var, cite, i { font-style:normal;}small { font-size:inherit;}s, a { text-decoration:none;}:focus { outline:none;}blockquote, q { quotes:none; margin:0;}table { border-collapse:collapse; border-spacing:0; empty-cells:show;/*table-layout:fixed;*/}img, iframe { border:none;}img { vertical-align: top; -ms-interpolation-mode: bicubic;/*ie7防止圖片縮小失真的*/}/*---------豎向菜單（非必需）---------*/.bl-vernav li { border-bottom:1px solid #ddd; margin-bottom:-1px; padding-top:1px;}.bl-vernav a { display:block; height:20px; line-height:20px; padding:10px 16px;}.bl-vernav a:hover { background:#F8F8F8; text-decoration:none;}/*.bl-vernav .cur a{ background:#428BCA; color:#fff;}*/.bl-vernav-ord { border:1px solid #ddd;}.vernav-level li li { border-left:none; border-right:none;}.vernav-level li li a { padding-left:40px;}.vernav-level .cur .one { background:#F8F8F8;}.vernav-level li .cur a { background:#F8F8F8;}/*diy*/ .bl-vernav-wrap { position:relative;}.bl-vernav-wrap .sideLine { position:absolute; left:-6px; top:0; z-index:1; line-height:0; font-size:0; border-left:#FF5F3E solid 7px; background-color:#F8F8F8;}.bl-vernav { position:relative; z-index:2;}.bl-vernav a:hover { background-color:transparent;}.demobox { width:460px; font-size:14px; color:#333; font-family:'Hiragino Sans GB', 'Microsoft Yahei', "WenQuanYi Micro Hei", SimSun, Tahoma, Arial, Helvetica, STHeiti;}a { color:#333; text-decoration:none;}</style></head><body style="padding:50px;"><div class="demobox"> <h1 class="h3">左邊條紋跟隨鼠標滑動導航</h1> <br/> <div class="bl-vernav-wrap"> <div class="sideLine"></div> <ul class="bl-vernav vernav-level"> <li><a href="#" class="one">導航菜單</a></li> <li class="cur"> <a href="#" class="one">神探夏洛克</a> <ul> <li><a href="#">海賊王</a></li> <li><a href="#">海賊王</a></li> <li><a href="#">海賊王</a></li> </ul> </li> <li><a href="#" class="one">神探夏洛克</a></li> <li><a href="#" class="one">神探夏洛克</a></li> <li><a href="#" class="one">神探夏洛克</a></li> </ul> </div></div><script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> <script>$(function(){ var verNav = $(".bl-vernav"), //第一層ul. line = verNav.siblings(".sideLine"), //左邊條紋線 verNavFirst = verNav.children("li:first"), //第一層ul中第一個li curY = verNav.children("li.cur").position().top; line.height(verNavFirst.outerHeight()-1).width(verNavFirst.outerWidth());//設置輔助線初始化高度和寬度，也可以直接用css設置好，這里就不用js計算了 verNav.find("li").mouseenter(function(){ var thisY = $(this).position().top; line.stop(true,true).animate({top:thisY},200); return false }) .end() .mouseleave(function(){ line.stop(true,true).animate({top:curY},300) }).trigger("mouseleave");});</script></body></html>希望本文所述對大家學習jquery程序設計有所幫助。
新聞熱點
疑難解答
