jQuery實現的滑塊滑動導航效果示例

來源：懂視網責編：小采時間：2020-11-27 22:13:44

jQuery實現的滑塊滑動導航效果示例

jQuery實現的滑塊滑動導航效果示例:本文實例講述了jQuery實現的滑塊滑動導航效果。分享給大家供大家參考，具體如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>www.gxlcms.com jque

推薦度：

點擊下載本文 文檔為doc格式

導讀jQuery實現的滑塊滑動導航效果示例:本文實例講述了jQuery實現的滑塊滑動導航效果。分享給大家供大家參考，具體如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>www.gxlcms.com jque

本文實例講述了jQuery實現的滑塊滑動導航效果。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.gxlcms.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.jb51.net/code/HtmlJsRun測試運行效果如下：