仿阿里雲懸浮效果

寫的不是很好，多多指教

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>導航</title>
    <link rel="stylesheet" href="css/nav.css">
    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="js/nav.js"></script>
</head>
<body>
<!-- 導航開始 -->
<div class="nav_container">
    <div class="nav_main">
        <!-- logo -->
        <div class="logo f_left">
            <a href="javascript:;">
                <img src="img/logo.png" alt="logo" title="logo">
            </a>
        </div>
        <!-- nav中間 -->
        <ul class="f_left nav-center">
            <li class="product"><a href="javascript:;">產品</a></li>
            <li class="solve"><a href="javascript:;">解決方案</a></li>
            <li class="zoology"><a href="javascript:;">合作與生態</a></li>
            <li class="api"><a href="javascript:;">文檔</a></li>
            <li class="support"><a href="javascript:;">支持</a></li>
            <div class="float"></div>
        </ul>

        <!-- nav右側 -->
        <ul class="f_right nav-right">
            <li><a href="javascript:;">價格</a></li>
            <li>|</li>
            <li><a href="javascript:;">控制檯</a></li>
            <li>|</li>
            <li><a href="javascript:;">登錄</a></li>
            <li>|</li>
            <li><a href="javascript:;">註冊</a></li>
        </ul>
    </div>
    <!-- nav 懸浮框 -->
    <div class="nav-modal hide">
        <div class="clearfix" style="width: 850px;margin: 0 auto">
            <!-- 產品start -->
            <div class="nav-product nav-modal-list f_left">
                <div class="nav-product-list f_left">
                    <ul>
                        <li class="highlight"><a href="javascript:;">產品1</a></li>
                        <li><a href="javascript:;">產品1</a></li>
                        <li><a href="javascript:;">產品1</a></li>
                        <li><a href="javascript:;">產品1</a></li>
                        <li><a href="javascript:;">產品1</a></li>
                        <li><a href="javascript:;">產品1</a></li>
                    </ul>
                </div>
                <!--產品1-->
                <div class="nav-product-cloud-computing f_left nav-product-cloud">
                    <ul style="width: 220px">
                        <li class="highlight"><a href="javascript:;">產品1</a>
                            <p>彈性擴展、高可靠、高可用</p>
                        </li>
                        <li><a href="javascript:;">產品1</a>
                            <p>彈性擴展、高可靠、高可用</p>
                        </li>
                        <li><a href="javascript:;">產品1</a>
                            <p>彈性擴展、高可靠、高可用</p>
                        </li>
                    </ul>
                </div>
                <!-- 產品1 -->
                <div class="nav-product-cloud-storage f_left nav-product-cloud hide">
                    <ul>
                        <li class="highlight"><a href="javascript:;">產品1</a>
                            <p>持久化存儲空間,彈性擴容</p>
                        </li>
                    </ul>
                </div>
                <!-- 產品1 -->
                <div class="nav-product-cloud-web f_left nav-product-cloud hide">
                    <ul>
                        <li class="highlight"><a href="javascript:;">產品1</a>
                            <p>彈性擴展、高可靠、高可用</p>
                        </li>
                        <li><a href="javascript:;">產品1</a>
                            <p>彈性擴展、高可靠、高可用</p>
                        </li>
                    </ul>
                </div>
                <!-- 產品1 -->
                <div class="nav-product-cloud-cdn f_left nav-product-cloud hide">
                    <ul>
                        <li class="highlight"><a href="javascript:;">產品1</a>
                            <p>提高用戶訪問網站的響應速度</p>
                        </li>
                    </ul>
                </div>
                <!-- 產品1 -->
                <div class="nav-product-cloud-video f_left nav-product-cloud hide">
                    <ul>
                        <li class="highlight"><a href="javascript:;">產品1</a>
                            <p>彈性擴展、高可靠、高可用</p>
                        </li>
                        <li><a href="javascript:;">產品1</a>
                            <p>彈性擴展、高可靠、高可用</p>
                        </li>
                    </ul>
                </div>
                <!--產品1 -->
                <div class="nav-product-cloud- f_left nav-product-cloud hide">
                    <ul>
                        <li class="highlight"><a href="javascript:;">產品1</a>
                            <p>彈性擴展、高可靠、高可用</p>
                        </li>
                    </ul>
                </div>
            </div> <!-- 產品end -->

            <!-- 解決方案 -->
            <div class="nav-solve nav-modal-list f_left">
                <div class="nav-solve-list f_left">
                    <ul>
                        <li class="highlight"><a href="javascript:;">解決方案1</a></li>
                        <li><a href="javascript:;">解決方案2</a></li>
                        <li><a href="javascript:;">解決方案3</a></li>
                    </ul>
                </div>
            </div>
            <!--合作與生態-->
            <div class="nav-zoology nav-modal-list f_left">
                <div class="nav-zoology-list f_left">
                    <ul>
                        <li class="highlight"><a href="javascript:;">11</a></li>
                        <li><a href="javascript:;">11</a></li>
                        <li><a href="javascript:;">11</a></li>
                    </ul>
                </div>
                <!--超算資源con-->
                <div class="nav-zoology-resource nav-zoology-con f_left">
                    <ul  style="height: 270px;width: 330px">
                        <li class="highlight"><a href="javascript:;">大數據</a></li>
                        <li><a href="javascript:;">11</a></li>
                        <li><a href="javascript:;">11</a></li>
                        <li><a href="javascript:;">11</a></li>
                        <li><a href="javascript:;">11</a></li>
                        <li><a href="javascript:;">11</a></li>
                        <li><a href="javascript:;">11</a></li>
                        <li><a href="javascript:;">11學</a></li>
                        <li><a href="javascript:;">11</a></li>
                    </ul>
                </div>
                <!--合作伙伴con-->
                <div class="nav-zoology-partner nav-zoology-con f_left hide">
                    <ul class="f_left">
                        <li class="highlight"><a href="javascript:;">11</a></li>
                        <li><a href="javascript:;">11</a></li>
                        <li><a href="javascript:;">11</a></li>
                    </ul>
                </div>
                <!--新聞中心con-->
                <div class="nav-zoology-new nav-zoology-con f_left hide">
                    <ul class="f_left">
                        <li class="highlight"><a href="javascript:;">應用軟件</a></li>
                        <li><a href="javascript:;">11</a></li>
                        <li><a href="javascript:;">11</a></li>
                        <li><a href="javascript:;">11學</a></li>
                    </ul>
                </div>
            </div>
            <!--文檔-->
            <div class="nav-api nav-modal-list f_left">
                <div class="nav-api-list f_left">
                    <ul>
                        <li class="highlight"><a href="javascript:;">產品文檔</a></li>
                    </ul>
                </div>
            </div>
            <!--支持-->
            <div class="nav-support nav-modal-list f_left">
                <div class="nav-support-list f_left">
                    <ul>
                        <li class="highlight"><a href="javascript:;">11</a></li>
                        <li><a href="javascript:;">11</a></li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div><!-- 導航結束 -->

</body>
</html>

css代碼

@charset "utf-8";
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,body{
    font-family: "微軟雅黑";
}
ul,li{
    list-style: none;
}
.f_left{
    float: left;
}
.f_right{
    float: right;
}
a{
    text-decoration: none;color: #d7e9fe;
}
img{
    border: none
}
p{
    font-size: 12px;
}
.clearfix:after {clear:both;content:".";display:block;font-size:0;height:0;overflow:hidden;visibility:hidden;}
.clearfix {*zoom:1;}
/*
*  導航容器
*/
.nav_container{
    width: 100%;
    height: 88px;
    background: #021429;
    position: fixed;
    top:0;
    left:0;
    font-size: 16px;
    z-index: 999;
}
.nav_main{
    width: 1200px;
    margin: 0 auto;
    height: 88px;
    font-size: 14px;
    background: #021328;
    font-weight: 500;
    color: #516f8f;
}
.nav_main a{
    color: #516f8f;
}
/*導航logo*/
.logo img{
    margin-top: 18px;
}
/*導航中間*/
.nav-center{
    margin-left: 150px;
    position: relative;
    width: 560px;
    height: 86px;
    border-bottom: 1px solid #63a4ed;
}
.nav-center li,.nav-right li{
    float: left;
    color: #516f8f;
    line-height: 88px;
}
.nav-center li{
    padding: 0 30px;
}
/*導航右側*/
.nav-right{
    margin-right: 20px;
}
.nav-right li{
    padding: 0 3px;
}
/*滑塊*/
.float {
    background: #63a4ed;
    position:absolute;bottom:-2px;left:0;
}
/*
** 懸浮框
*/
.nav-modal{
    position: absolute;
    left: 0;
    top:88px;
    width: 100%;
    min-height: 0;
    z-index: 99;
    background: rgba(0,0,0,0.9);
}
.nav-modal a{
    color: #d7e9fe;
}
/*高亮*/
.highlight{
    background: #63a4ed!important;
    color: #fff!important
}
.highlight a,.highlight p{
    color: #fff!important;
}
/*鼠標移入效果*/
.nav-modal-list ul li:hover{
    background: #63a4ed;
    color: #fff!important;
    cursor: pointer;
}
.nav-modal-list ul li a:hover,.nav-right li a:hover{
    color: #fff!important
}
/*下拉框*/
.nav-modal-list{
    width: 900px;
    height: 335px;
    display: none;
    margin: 20px 0;
    margin-left: 150px;
}
.nav-product .nav-product-list,.nav-solve .nav-solve-list,.nav-zoology .nav-zoology-list,
.nav-api .nav-api-list,.nav-support .nav-support-list {
    width: 150px;
    height: 100%;
    border-left:1px solid #2d445d;
    border-right:1px solid #2d445d;
}
/*解決方案,文檔,支持*/
.nav-solve,.nav-api ,.nav-support{
    width: 150px;
}
.nav-product-list ul li,.nav-solve-list ul li,.nav-zoology-list ul li,
.nav-api-list ul li,.nav-support-list ul li {
    width: 88%;
    height: 40px;
    margin: 15px auto 0;
    line-height: 40px;
    background: #222e3d;
    color: #fff;
    padding:0 15px;
}

.hide{
    display: none;
}
/*懸浮下拉框*/
.nav-product-cloud,.nav-solve-plan,.nav-zoology-con{
    width: 720px;
    height:366px;
}
.nav-product-cloud ul li,.nav-zoology-con ul li{
    width: 220px;
    background: #222e3d;
    color: #fff;
    margin-left:20px;
    margin-top: 15px;
    padding:8px 8px;
}
.nav-product-cloud p{
    color: #87909a;
}
/*合作與生態*/
.nav-zoology-con ul li{
    width: 140px;
    padding:10px;
}
.nav-product-cloud-computing ul li,.nav-zoology-resource ul li{
    float: left;
}

/*
** 媒體查詢 適配
*/
@media only screen and (min-width: 1200px) {
    .nav_container .nav_main {
        width: 1200px;
        font-size: 16px;
    }
    .nav-solve{
        margin-left: 225px;
    }
    .nav-api{
        margin-left: 480px;
    }
    .nav-support{
        margin-left: 570px;
    }
}
@media only screen and (min-width: 1600px) {
    .nav_container .nav_main {
        width: 1523px;
        font-size: 18px;
    }
    .nav-center{
        width: 580px;
        margin-left: 240px;
    }
    .nav-modal-list{
        margin-left: 80px;
    }
    .nav-solve{
        margin-left: 165px;
    }
    .nav-api{
        margin-left: 430px;
    }
    .nav-support{
        margin-left: 525px;
    }
}

/**
 * 導航效果
 */
$(function () {
    var flag=0; //開關
    $(document).on("mouseenter",".nav-center li",function () {
        flag=1;
        $(".nav-center li a").css("color","#58789a");
        $("a",this).stop().css("color","#fff");
        $(".float").stop().animate({//滑塊效果
            left:this.offsetLeft,width:this.offsetWidth,height:5,right:'0'
        },200);
        //懸浮下拉框效果
        $(this).addClass("current").siblings().removeClass('current');
        $(".nav-modal").show();
        $(".nav-modal").stop().animate({"height":"460px"},500);
        $(".nav-modal-list").eq($(this).index()).show().siblings(".nav-modal-list").hide();
        //顯示滑過對象的內容
        navModal(".nav-product-list ul li",".nav-product-cloud"); //產品
        navModal(".nav-product-cloud ul li"); //產品
        navModal(".nav-solve-list ul li"); //解決方案
        navModal(".nav-zoology-list ul li",".nav-zoology-con"); //合作與生態
        navModal(".nav-zoology-con ul li"); //合作與生態
        navModal(".nav-support-list ul li"); //支持
    });
    $(document).on("mouseleave",".nav-center li",function () {
        if(flag){
            $(".float").stop().animate({
                left:this.offsetLeft,width:this.offsetWidth,height:5
            },200);
            flag=0;
        }
        // $(".nav-center li a").css("color","#58789a");
    });
    //鼠標離開懸浮框事件
    $(document).on("mouseleave",".nav-modal",function (event) {
        event.preventDefault();
        $(".nav-modal").hide();
        $('.nav_modal>*').show();
        flag=1;
        $(".nav-center .float").stop().animate({
            left:this.offsetLeft,width:this.offsetWidth
        },200);
        $(".nav-center li a").css("color","#58789a");
    });
});
/* 顯示滑過對象的內容
* obj1 對象
* obj2 對象的內容
* */
function navModal(obj1,obj2) {
    $(obj1).on("mouseenter",function () {
        $(this).addClass("highlight").siblings().removeClass('highlight');
        $(obj2).eq($(this).index()).show().siblings(obj2).hide();
    });
}

仿阿里雲懸浮效果

angular 隨手記

用Canvas模擬蘋果畫圖工具

Page + Hexo 搭建個人博客

AngularJs下拉搜索框

ant design pro+react 踩過的坑記錄下

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

仿阿里雲懸浮效果

angular 隨手記

用Canvas模擬蘋果畫圖工具

Page + Hexo 搭建個人博客

AngularJs下拉搜索框

ant design pro+react 踩過的坑 記錄下

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

ant design pro+react 踩過的坑記錄下