如何改js讓滑塊能像這個(gè)網(wǎng)站的效果一樣

請(qǐng)問(wèn)要怎么改js才能像http://www.vanke.com/ 里面的導(dǎo)航滑塊效果一樣

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./js/jquery.min.js"></script>
        <script>
            $(function () {
                var nav = $("#nav"),
                    link = nav.children(),
                    linkon = link.filter(':not(.more)'),
                    linkoff = link.filter('.more');
                link.hover(function () {
                        $(link).removeClass("wrap_menu1_2");
                        $(this).addClass("wrap_menu1_2");
                    },
                    $("nav").mouseleave(function () {
                        $("linkon").addClass("wrap_menu1_2")
                    }));
            });
        </script>
        <style>
            ul li{
            list-style:none;
            }
            #nav {
                position: absolute;
                top: 0;
                right: 171px;
                z-index: 4;
                height: 60px;
                background-color: #fff;
                overflow: hidden;
            }
    
            #nav li {
                float: left;
                height: 100%;
                -webkit-transition: background-color 700ms;
                transition: background-color 700ms;
            }
    
            #nav li a {
                position: relative;
                z-index: 2;
                display: block;
                width: 100%;
                height: 100%;
                font-weight: bold;
                padding:15px 10px;
                font-size: 13px;
                line-height: 79px;
                text-align: center;
                color: #666;
                -webkit-transition: color 200ms;
                transition: color 200ms;
            }
    
            .wrap_menu1_2 {
                background: red;
            }
        </style>
    </head>
    
    <body>
        <div class="nav-box">
            <ul id="nav">
                <li class="wrap_menu1 wrap_menu1_2">
                    <a href="#">home</a>
                </li>
                <li class="wrap_menu1 more">
                    <a href="#">link1</a>
                </li>
                <li class="wrap_menu1 more">
                    <a href="#">link2</a>
                </li>
                <li class="wrap_menu1 more">
                    <a href="#">link3</a>
                </li>
                <li class="wrap_menu1 more">
                    <a href="#">link4</a>
                </li>
            </ul>
        </div>
    </body>
    
    </html>

回答

編輯回答

糖豆豆

調(diào)整了下你的代碼，利用了下CSS3，講真的，先好好學(xué)習(xí)布局，對(duì)你寫(xiě)JS事半功倍，JQ雖然是基礎(chǔ)的不能再基礎(chǔ)了，但是HTML CSS是所有頁(yè)面的基礎(chǔ)啊

 <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="http://static.leiting.com/lib/jquery-1.9.0.min.js"></script>
        <script>
                $(function () {
                    var nav = $("#nav"),
                        link = nav.children();
                    // linkon = link.filter(':not(.more)'),
                    // linkoff = link.filter('.more');

                    link.hover(function () {
                               $(this).addClass("wrap_menu1_2").siblings().removeClass('wrap_menu1_2');
                    })
                    // $("nav").mouseleave(function () {
                    //     $("linkon").addClass("wrap_menu1_2")
                    // }));
                });
        </script>
        <style>
            ul li{
            list-style:none;
            }
            #nav {
                position: absolute;
                top: 0;
                right: 171px;
                z-index: 4;
                height: 60px;
                background-color: #fff;
                overflow: hidden;
            }
    
            #nav li {
                position: relative;
                float: left;
                height: 70px;
                overflow: hidden;
                width: 70px;
            }
    
            #nav li a {
                position: relative;
                z-index: 2;
                display: block;
                width: 100%;
                height: 100%;
                font-weight: bold;
                font-size: 13px;
                line-height: 100%;
                text-align: center;
                color: #666;
            }
            #nav li:after{ content: ''; position:absolute; left: 0; top: 100%; right: 0; height: 70px; background: red;
        transition:.3s all;
        }
            #nav .wrap_menu1_2:after{ top: 0}
        </style>
    </head>
    
    <body>
        <div class="nav-box">
            <ul id="nav">
                <li class="wrap_menu1 wrap_menu1_2">
                    <a href="#">home</a>
                </li>
                <li class="wrap_menu1 more">
                    <a href="#">link1</a>
                </li>
                <li class="wrap_menu1 more">
                    <a href="#">link2</a>
                </li>
                <li class="wrap_menu1 more">
                    <a href="#">link3</a>
                </li>
                <li class="wrap_menu1 more">
                    <a href="#">link4</a>
                </li>
            </ul>
        </div>
    </body>
    
    </html>

2017年3月18日 20:08

編輯回答

不討囍

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8">
    <style>
        div#home
        {
            width:100px;
            height:100px;
            background:#fff;
            border:1px solid blue;
        }
        div#modal{
            height:100px;
            width:100px;
            font-size: 12px;
        }
        div#modal:hover{
            background-color: red;
            animation:myfirst 2s;
        }
        @keyframes myfirst
        {
            0% {
                width:0px;
            }
            50%{
                width:50px;
            }
            100% {
                width: 100px;
            }
        }
    </style>
</head>
<body>
<div id="modal">主頁(yè)</div>
<div id="home"></div>

</body>
</html>

用css實(shí)現(xiàn)了一個(gè)大概，但是還有缺陷

2017年1月24日 01:01