快捷導(dǎo)航

jQuery實現(xiàn)的滑塊滑動導(dǎo)航效果示例

更新時間：2018年06月04日 14:59:19 作者：前端愛我

這篇文章主要介紹了jQuery實現(xiàn)的滑塊滑動導(dǎo)航效果,涉及jQuery事件響應(yīng)及頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.fzitv.net jquery滑動導(dǎo)航</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設(shè)置比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" >小學(xué)</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" >大學(xué)</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; //當(dāng)前l(fā)i的偏移量減去當(dāng)前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測試運行效果如下：