具有滑动效果的导航代码

<script type="text/javascript">
        $(function () {
            var $el, leftPos, newWidth;
            $("#example").append("<li id='line'></li>");
            var $Line = $("#line");
            $Line
                .width($(".current_page_item").width())
                .css("left", $(".current_page_item a").position().left)//获得位置
                .data("origLeft", $Line.position().left)
                .data("origWidth", $Line.width());
            $("#example li").find("a").hover(function () {
                $el = $(this);
                leftPos = $el.position().left;
                newWidth = $el.parent().width();//定义下划线的新宽度
                $Line.stop().animate({//自定义动画
                    left: leftPos,
                    width: newWidth
                });
            }, function () {
                $magicLine.stop().animate({
                    left: $Line.data("origLeft"),
                    width: $Line.data("origWidth")
                });
            });
        });
    </script>

    <div class="div">
        <ul class="group" id="example">
            <li class="current_page_item"><a href="#">Home</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">12</a></li>
            <li><a href="#">123</a></li>
            <li><a href="#">1234</a></li>
            <li><a href="#">12345</a></li>
            <li><a href="#">123456</a></li>
            <li><a href="#">12345678</a></li>
            <li><a href="#">123456789</a></li>
            <li><a href="#">1234567890</a></li>
            <li><a href="#">12345678901</a></li>
            <li><a href="#">123456789012</a></li>
        </ul>
    </div>

*{margin:0;padding:0}
body{font:14px Georgia}
header{padding:100px 0 0 0;display:block}
header h1{width:960px;margin:0 auto}
a{color:#eee}
a:hover{color:white}
.div{margin:50px auto;background-color:#666;border-top:2px solid #000;border-bottom:2px solid #000}
.group:after{visibility:hidden;display:block;content:"";clear:both;height:0}
#example{margin:0 auto;list-style:none;position:relative;width:960px}
#example li{display:inline-block}
#example a{color:#bbb;font-size:14px;float:left;padding:6px 10px 4px 10px;text-decoration:none;text-transform:uppercase}
#example a:hover{color:white}
#line{position:absolute;bottom:-2px;left:0;width:100px;height:2px;background:#fe4902}
.current_page_item a{color:white !important}

 

转载于:https://www.cnblogs.com/danznb/p/3482965.html