# 样式操作_html. qq点击切换账号,滑动效果-CSDN博客

本文链接：https://blog.csdn.net/qq_40029828/article/details/105257533

1、下拉菜单的滑动效果

<style>
    * {
        margin: 0 auto;
        padding: 0 auto;
        padding-inline-start: 0px;
    }

    li {
        list-style: none;
        line-height: 50px;
        text-align: center;
    }

    .tab > li {
        float: left;
        width: 100px;
        height: 50px;
        margin: 2px;
    }

    .tab > li ul {
        overflow: auto;
        display: none;

    }

    .tab > li ul li {
        width: 98px;
        height: 50px;
        border: 1px solid red;
    }
</style>

<body>

<ul class="tab">
    <li>001
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </li>
    <li>002
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </li>

    <li>003
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </li>
</ul>


</body>
<script src="jqueryMin.js"></script>
<script>
    $('.tab>li').hover(function () {
        $(this).children('ul').stop().slideToggle(100);
    })
</script>

2、手风琴动画效果

<style>
    * {
        margin: 0 auto;
        padding: 0 auto;
        padding-inline-start: 0px;
    }

    body {
        background-color: black;
    }

    li {
        list-style: none;
    }

    .tab {
        width: 700px;
    }

    .tab > li {
        float: left;
        height: 50px;
        margin: 2px;
    }

    .tab > li img {
        width: 50px;
        height: 50px;
    }

    .tab > li .big {
        width: 100px;
        display: none;
    }

</style>

<body>
<div>
    <ul class="tab">
        <li><a href=""><img class="small" style="display: none" src="images/images/dmd1.jpeg" alt="">
            <img style="display: block" class="big" src="images/images/dmd1.jpeg" alt=""></a></li>
        <li><a href=""><img src="images/images/dmd6.jpg" alt="">
            <img class="big" src="images/images/dmd6.jpg" alt=""></a></li>
        <li><a href=""><img src="images/images/dmd3.jpg" alt="">
            <img class="big" src="images/images/dmd3.jpg" alt=""></a></li>
        <li><a href=""><img src="images/images/dmd4.jpg" alt="">
            <img class="big" src="images/images/dmd4.jpg" alt=""></a></li>
        <li><a href=""><img src="images/images/dmd5.jpg" alt="">
            <img class="big" src="images/images/dmd5.jpg" alt=""></a></li>
    </ul>
</div>


</body>
<script src="jqueryMin.js"></script>
<script>
    $(".tab>li").mouseenter(function () {
     $(this).stop().animate({width: 100}).find('.big').stop().fadeIn().siblings('img').stop().fadeOut();
        $(this).siblings("li").stop().animate({width: 50}).find('.big').stop().fadeOut().siblings('img').stop().fadeIn();
    })
</script>