本文實例講述了jQuery實現的滑塊滑動導航效果。分享給大家供大家參考，具體如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>m.survivalescaperooms.com jquery滑動導航</title> <style> *{margin: 0;padding: 0;box-sizing: border-box;-moz-box-sizing: border-box;} body { font: 16px/20px 'Microsoft yahei,微軟雅黑'; color: #AFBBBB; } ul { list-style-type: none; } ul li { float: left; } a { text-decoration: none; color: #AFBBBB; } a:hover { color: #ffffff; cursor: pointer; } .clearfix:before,.clearfix:after { content:""; clear: both; display: table; height: 0; zoom: 1; overflow: hidden; } .nav { width:519px; margin: 0 auto; } .nav ul { background: gray; height: 35px; line-height: 35px; position: relative; padding: 0 5px; } .nav ul li { position: relative; padding: 0 25px; } .nav ul li>a { position: relative; z-index: 100; /*將a元素的z-index設置比li大，這樣hover效果才不會無效*/ } .nav ul li:last-child { width: 98px; height: 90%; position: absolute; z-index: 50; left: 5px; bottom: 0; top: 0; margin: auto; background: rgba(152,206,170,0.5); border-radius: 5px; } </style></head><body><div class="nav"> <ul class="clearfix"> <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >幼兒園</a></li> <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >小學</a></li> <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >初中</a></li> <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >高中</a></li> <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >大學</a></li> <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >社會</a></li> <li class="huadong" id="huaBlock"></li> </ul></div><script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script><script> $(function(){ $("ul li:not(:last)").hover(function(){ $("#huaBlock").stop(); //停止正在運行的動畫 var curliWidth=$(this).outerWidth(),curleft=$(this).offset().left-$(this).parent().offset().left; //當前li的偏移量減去當前ul的偏移量就是li距離ul的距離 // alert("curleft:"+curleft); $("#huaBlock").animate({"width":curliWidth,"left":curleft},500); },function(){ $("#huaBlock").stop(); $("#huaBlock").animate({"width":98,"left": 5},200); }); });</script></body></html>使用在線HTML/CSS/JavaScript代碼運行工具 http://tools.VeVB.COm/code/HtmlJsRun測試運行效果如下：
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
