jQuery實(shí)現(xiàn)簡(jiǎn)單的手風(fēng)琴效果

發(fā)布時(shí)間：2020-05-10 01:16:37 來(lái)源：網(wǎng)絡(luò) 閱讀：149 作者：wx5a5849600868d 欄目：web開(kāi)發(fā)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                position: absolute;
                left: 100px;
                width: 500px;
                height: 100px;
                background-color: #A0522D;
            }
            li{
                box-sizing: border-box;
                float: left;
                width: 50px;
                height: 100px;
                background-color: #0070C9;
                border: 1px white solid;
                list-style: none;
                position: relative;
            }
            .aa{
                width: 300px;

            }
            .last{
                position: absolute;
                right: 0;
                top: 0;
            }
        </style>
    </head>
    <body>
        <ul id="box">
            <li class="aa">1</li>
            <li class="">2</li>
            <li class="">3</li>
            <li class="">4</li>
            <li class="last">5</li>
        </ul>
        <script src="../jQuery/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                $('#box li').mouseover(function(){
                    //讓指定li變寬                                   讓其他li變窄
                    $(this).stop().animate({'width':'300px'},800).find().end().siblings().stop().animate({'width':'50px'},800)
                })
            })
        </script>
    </body>
</html>

向AI問(wèn)一下細(xì)節(jié)

jQuery實(shí)現(xiàn)簡(jiǎn)單的手風(fēng)琴效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽