首页 > 代码库 > jq仿 妙味课堂导航01

jq仿 妙味课堂导航01

2024-09-05 06:24:46   218人阅读

技术分享 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul,li{
            list-style:none;
        }
        a{
            color:#333;
            text-decoration:none;
        }
        .clearfix{
            zoom:1;
        }
        .clearfix:after{
            content:".";
            display:block;
            width:0;
            height:0;
            visibility:hidden;
            clear:both;
        }
        .menu{
            position:relative;
            height:30px;
            line-height:30px;
            width:412px;
            margin:20px auto;
            background:#000;
            overflow:hidden;
        }
        .menu ul{
            position:relative;
        }
        .menu li{
            float:left;
            height:100%;
        }
        .menu li a{
            display:block;
            padding:0 18px;
            color:#fff;
            font-size:14px;
        }
        .box{
            height:100%;
            position:absolute;
            top:0;
            left:0;
            width:64px;
            background:deeppink;
            overflow:visible;
            -webkit-filter: blur(0px);
        }
        .box .left,.box .right{
            width:0;
            height:100%;
            position:absolute;
            top:0;
            border-radius:50%;
            -webkit-border-radius:50%;
        }
        .box .left{
            left:0;
            background:deeppink;
        }
        .box .right{
            right:0;
            background:#000;
        }

        .box.active .left{
            background: #000000;
        }
        .box.active .right{
            background: deeppink;
        }
    </style>
</head>
<body>
<div class="menu">
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <ul class="clearfix">
        <li ind="1"><a href="javascript:void(0);">首页</a></li>
        <li ind="2"><a href="javascript:void(0);">课程</a></li>
        <li ind="3"><a href="javascript:void(0);">视频</a></li>
        <li ind="4"><a href="javascript:void(0);">问答</a></li>
        <li ind="5"><a href="javascript:void(0);">会员</a></li>
        <li ind="6"><a href="javascript:void(0);">联系方式</a></li>
    </ul>
</div>
</body>
<script src="../jquery-1.11.3.min.js"></script>
<script>
    var lastIndex=0;
    $(".menu li").hover(function(){
        var $this=$(this),
                $index=$this.index(),
                $width=$this.width(),
                num= 0,timer1,flag=$index;
        for(var i=0;i<$index;i++){
            num+=$this.siblings().eq(i).width();
        }
        var f=1;
        if(lastIndex>$index){//向左
            f=-1;
        }else{//向右
            f=1;
        }
        var i = Math.abs($index-lastIndex);
        lastIndex = $index;
        clearTimeout(timer1);
        timer1=window.setTimeout(function(){
            $(".box").css({width:$width}).animate({left:num},100*i).delay(10);
            if(f>0){//向右
                $(".box").addClass("active");
            }else{
                $(".box").removeClass("active");
            }
            $(".left").animate({width:"30",left:"-15px"},100*i).animate({width:0,left:0},20);
            $(".right").animate({width:"30px",right:"-15px"},100*i).animate({width:0,right:0},20);

        },100);
    },function(){
    })
</script>
</html>
View Code

技术分享

jq仿 妙味课堂导航01


联系
我们