js實現水平伸縮導航欄

時間 2019-11-12

原文原文鏈接

HTML代碼：動畫

<body>
    <ul>
        <li><a>page1</a></li>
        <li><a>page2</a></li>
        <li><a>page3</a></li>
        <li><a>page4</a></li>
        <li><a>page5</a></li>
    </ul>
</body>

CSS代碼：this

    <style>
        body,ul{
            margin: 0;
            padding:0;
        }
        ul{
            list-style: none;
            height:40px;
            border-bottom: solid 5px #e4393c;
        }
        li{
            text-align: center;
            float: left;
        }
        a{
            text-decoration: none;
            display: block;
            width:100px;
            height:40px;
            line-height: 40px;
            background-color: #6a6a6a;
            color: #fff;
        }
        a:hover{
            background-color: #e4393c;
        }
    </style>

JS代碼兩種實現方式：spa

        //原始方式
        window.onload = function () {
            var oA = document.getElementsByTagName('a');

            for(var i=0;i<oA.length;i++){

                oA[i].onmouseover = function(){
                    clearInterval(this.time);
                    var This = this;
                    This.time = setInterval(function(){
                        This.style.width = This.offsetWidth + 10 + 'px';
                        if(This.offsetWidth >= 200){
                            clearInterval(This.time);
                        }
                    },10);
                };

                oA[i].onmouseout = function() {
                    clearInterval(this.time);
                    var This = this;
                    This.time = setInterval(function () {
                        This.style.width = This.offsetWidth - 10 + 'px';
                        if (This.offsetWidth <= 100) {
                            This.style.width = "100px";
                            clearInterval(This.time);
                        }
                    }, 10);
                }
            }
        }

        //動畫實現方式
        $(function(){
            $('a').hover(
                function(){
                    $(this).stop().animate({"width":"300px"},100);
                },
                function(){
                    $(this).stop().animate({"width":"100px"},100);
                }
            );
        })

效果：code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。