个人博客—页面导航

个人博客—页面导航

• 鼠标滑过导航项时，蓝色背景图片从起始位置紧跟鼠标滑到，随后白色文字滑动到对应导航项；
• 鼠标滑出后，蓝色背景图片回到起始位置，白色文字也滑回到起始位置；
• 点击导航项，则页面跳转到对应页面，且蓝色背景图片和白色文字起始位置变为被点击项。

页面导航

html部分

<!-- 导航栏 -->
<div id="nav">
  <ul class="nav_4">
    <a href="index.html"><li></li></a>
    <a href="article.html"><li></li></a>
    <a href="work.html"><li></li></a>
    <a href="book.html"><li></li></a>
    <a href="about.html"><li></li></a>
  </ul>
  <div class="nav_2 nav_2_on nav_2_on_1">
    <ul class="nav_3 nav_3_on nav_3_on_1">
      <li>首页</li>
      <li>文章</li>
      <li>作品</li>
      <li>书架</li>
      <li>关于</li>
    </ul>
  </div>
  <ul class="nav_1">
    <li>首页</li>
    <li>文章</li>
    <li>作品</li>
    <li>书架</li>
    <li>关于</li>
  </ul>   
</div>
<!-- /导航栏 -->

js部分

    //滑动导航
    var start_on = {
            nav_2:$('#nav .nav_2_on').position().left,
            nav_3:$('#nav .nav_3_on').position().left,
        };
    $('#nav .nav_4 li').on({
        mouseover : function () {
            var hover_on = $(this).first().position();
            $('#nav .nav_2').animate({
                left : hover_on.left + 20,          
            },
            100,
            function(){
                $('#nav .nav_3').animate({
                    left : - hover_on.left
                },200);
            }); 
        },
        mouseout : function () {
            $('#nav .nav_2').animate({
                left : start_on.nav_2,          
            },
            1,
            function(){
                $('#nav .nav_3').animate({
                    left : start_on.nav_3
                },2);
            });
        }
    });

代码在Github：个人博客