魅族首页导航效果(不兼容IE) 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>魅族导航--鼠标经过列表依次显示效果</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul,li{
            list-style:none;
        }
        .clearfix{
            zoom:1;
        }
        .clearfix:after{
            content:".";
            display:block;
            width:0;
            height:0;
            visibility:hidden;
            clear:both;
        }
        .header{
            width:600px;
            height:300px;
            margin:0 auto;
            position:relative;
        }
        .header li{
            float:left;
            text-align:center;
        }
        .header-ul1{
            background:#ccc;
        }
        .header-ul1>li{
            width:100px;
            text-align:center;
            background:#ccc;
            height:50px;
            line-height:50px;
            z-index:99999
        }
        .header-ul1>li.active{
            background:darkgoldenrod;
        }
        .header-ul2 i{
            display:block;
            width:100px;
            height:100px;
            background:url("mobile.png") no-repeat center;
            background-size:contain;
        }
        .header-wrapper{
            width:100%;
            height:0;
            animation:all 1s;
            overflow:hidden;
            position:absolute;
            top:50px;
            z-index:99;
            left:0;
        }
        .header-wrapper li{
            opacity:0;
        }
        .header-wrapper.header-show{
            background:#00b2de;
            animation:wrapper-show .8s forwards;
        }
        @-webkit-keyframes wrapper-show {
            from {
                height: 0
            }
            to {
                height: 142px
            }
        }
        .header-wrapper.header-show li{
            opacity: 1 \9 \0;
            filter: alpha(opacity=100);
            -webkit-animation: sub-enter .8s forwards;
            animation:sub-enter 1s forwards
        }
        .header-wrapper.header-show li:nth-child(1){
            -webkit-animation-delay: 0s;
            animation-delay: 0s
        }
        .header-wrapper.header-show li:nth-child(2){
            -webkit-animation-delay: .4s;
            animation-delay: .4s
        }
        .header-wrapper.header-show li:nth-child(3){
            -webkit-animation-delay: .8s;
            animation-delay: .8s
        }
        @-webkit-keyframes sub-enter{
            from {
                -webkit-transform: translate(70px);
                transform: translate(70px);
                opacity: 0;
                filter: alpha(opacity=0)
            }
            to {
                -webkit-transform: translate(0);
                transform: translate(0);
                opacity: 1;
                filter: alpha(opacity=100)
            }
        }
    </style>
</head>
<body>
<div class="header">
    <ul class="header-ul1 clearfix">
        <li>官网</li>
        <li data-index="1">
            手机
            <div class="header-wrapper" data-index="1">
                <ul class="header-ul2 clearfix">
                    <li>
                        <i></i>
                        <span>手机</span>
                    </li>
                    <li>
                        <i></i>
                        <span>OPPO R9</span>
                    </li>
                    <li>
                        <i></i>
                        <span>OPPO R9</span>
                    </li>
                </ul>
            </div>
        </li>
        <li>耳机</li>
        <li data-index="2">充电器
            <div class="header-wrapper" data-index="2">
                <ul class="header-ul2 clearfix">
                    <li>
                        <i></i>
                        <span>充电器</span>
                    </li>
                    <li>
                        <i></i>
                        <span>OPPO R9</span>
                    </li>
                    <li>
                        <i></i>
                        <span>OPPO R9</span>
                    </li>
                </ul>
            </div>
        </li>
        <li>配件</li>
        <li data-index="3">
            智能
            <div class="header-wrapper"  data-index="3">
                <ul class="header-ul2 clearfix">
                    <li>
                        <i></i>
                        <span>智能</span>
                    </li>
                    <li>
                        <i></i>
                        <span>OPPO R9</span>
                    </li>
                    <li>
                        <i></i>
                        <span>OPPO R9</span>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</div>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script>
    $(".header-ul1 li").each(function(){
        var $index=$(this).attr("data-index"),$this=$(this);
        $this.hover(
                function(){
                    $this.addClass("active");
                    if($this.attr("data-index")){
                        $(".header-wrapper[data-index="+$index+"]").addClass("header-show")
                    }
                },function(){
                    $this.removeClass("active");
                    if($this.attr("data-index")){
                        $(".header-wrapper[data-index="+$index+"]").removeClass("header-show")
                    }
                }
        );

    });
</script>
</html>

 

posted @ 2017-02-20 09:56  dongxiaolei  阅读(310)  评论(0)    收藏  举报