jquery实现蓝红领航菜单滑动动画

jquery实现蓝红导航菜单滑动动画
利用jquery实现百度新闻导航菜单滑动动画蓝红配色，高端大气
查看效果：http://hovertree.com/h/bjaf/qufo9d03.htm
代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 解说： http://hovertree.com/h/bjaf/qufo9d03.htm-->
    <title>jquery仿百度新闻菜单滑动动画 - 何问起</title><base target="_blank" />
    <style type="text/css">
        body {
            margin: 0px;
        }
 
        .hovertreenav  ul, li, a{margin: 0px;
            padding: 0px;
            font-size: 20px;
            border: 0;
            color:white
        }
 
        .hovertreenav {
            margin-top: 50px;
            width: 100%;
            min-width:870px;
            background-color: #01204F;
            color:white
        }
 
        .div-nav {
            /*作为div-hover的父元素定位参照*/
            position: relative;
            width: 870px;
            margin: 0px auto;
        }
 
        .div-hover {
            background-color: Red;
            /*以父元素绝对定位*/
            position: absolute;
            height: 50px;
            left: 0px;
            top: 0px;
            width: 0px;
        }
 
        ul {
            list-style: outside none none;
            width: 100%;
            height: 50px;
        }
 
            ul li {
                float: left;
                /*****Start（作用:导航文字浮于div-hover红色之上）*******/
                position: relative;
                z-index: 4;
                /*********************End*************************/
            }
 
                ul li a {
                    line-height: 50px;
                    display: block;
                    padding: 0px 15px;
                    text-align: center;
                    text-decoration: none;
                }
        /**设置菜单激活***/
        .active {
            background-color: Red;
        }
    </style>
    <script src="http://hovertree.com/ziyuan/jquery/jquery-1.12.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
 
        var divHoverLeft = 0;
        var aWidth = 0;
 
        $(document).ready(function () {
            //菜单滑动动画
            $("a").on({
                 /*此处用mouseover或者mouseenter均可，如果以后要为X标签同时添加悬停和移出事件，建议用enter和leave也就是传说中的hover事件，因为里面事件冒泡已经处理过，就不会出现类似over和out之类的情况了*/
                'mouseenter': function () {
                    SetDivHoverWidthAndLeft(this);
                    //设置滑动动画
                     $(".div-hover").stop().animate({ width: aWidth, left: divHoverLeft }, 150);
                },
                'click': function () {
                    SetDivHoverWidthAndLeft(this);
                    //清除所有a标签class
                    $('a').removeClass();
                    //设置当前点击菜单为激活状态
                    $(this).addClass('active');
 
                    $(".h-width").val(aWidth);
                    $(".h-left").val(divHoverLeft);
                }
            });
 
            /*鼠标滑出UL或者div-nav背景div-hover自动定位到激活菜单处*/
            //mouseleave事件定位到ul或者div-nav均可
            $("ul").on({
                'mouseleave': function (event) {
                    $(".div-hover").stop().animate({ width: $(".h-width").val(), left: $(".h-left").val() }, 150);
                }
            });
        });
 
        function SetDivHoverWidthAndLeft(element) {
            divHoverLeft = GetLeft(element);
            aWidth = GetWidth(element);
        }
 
        //获得Li宽度
        function GetWidth(ele) {
            return $(ele).parent().width();
        }
 
        //获得div-hover左边距
        function GetLeft(element) {
            //获得li之前的同级li元素
            var menuList = $(element).parent().prevAll();
            var left = 0;
            //计算背景遮罩左边距
            $.each(menuList, function (index, ele) {
                left += $(ele).width();
          });
          return left;
        }
    </script>
</head>
<body>
    <div class="hovertreenav">
        <div class="div-nav">
            <!--添加滑动背景-->
            <div class="div-hover">
            </div>
            <ul>
                <li><a class="active" href="http://hovertree.com/">网站首页</a></li>
                <li><a href="http://hovertree.com/h/">热点</a> </li>
                <li><a href="http://tool.hovertree.com/">国际新闻</a> </li>
                <li><a href="http://hovertree.com/tiku/">题库</a> </li>
                <li><a href="http://hovertree.com/h/bjaf/qufo9d03.htm">效果来源</a> </li>
                <li><a href="jhttp://hovertree.com/code/">体育新闻</a> </li>
                <li><a href="javascript:void(0)" target="_self">点我试试</a> </li>
                <li><a href="http://hovertree.com/texiao/">名人</a> </li>
                <li><a href="http://hovertree.com/tool/ewm/">古迹</a> </li>
            </ul>
        </div>
    </div>
    <input type="hidden" class="h-width" value="110" />
    <input type="hidden" class="h-left" value="0" />
    <div style="text-align:center;"><h1>仿百度新闻菜单滑动动画</h1>hovertree.com 何问起</div>
</body>
</html>
网页特效：http://ini.iteye.com/blog/2165698
jquery实现蓝红领航菜单滑动动画

相关推荐
