手风琴效果

周百万.

已于 2022-07-22 17:57:56 修改

阅读量304

点赞数 1

分类专栏： javascript 编程 html 文章标签： html javascript jquery 手风琴效果

于 2022-07-21 17:37:28 首次发布

本文链接：https://blog.csdn.net/m0_45142186/article/details/125917425

版权

html 同时被 3 个专栏收录

37 篇文章 20 订阅

订阅专栏

javascript

28 篇文章 2 订阅

订阅专栏

编程

19 篇文章 1 订阅

订阅专栏

效果展示：

html部分：

<body>
    <div class="container">
        <ul>
            <li>
                <a href="#">
                    <img src="images/1.jpg" alt="" class="small">
                    <img src="images/1.jpg" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/2.jpg" alt="" class="small">
                    <img src="images/2.jpg" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/3.jpg" alt="" class="small">
                    <img src="images/3.jpg" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/4.jpg" alt="" class="small">
                    <img src="images/4.jpg" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/5.jpg" alt="" class="small">
                    <img src="images/5.jpg" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/6.jpg" alt="" class="small">
                    <img src="images/6.jpg" alt="" class="big">
                </a>
            </li>

        </ul>
    </div>
</body>

css部分：

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            box-sizing: border-box;
        }
        
        .container {
            border-radius: 10px;
            width: 490px;
            height: 90px;
            background-color: #eeeddd;
            margin: 0 auto;
            padding: 10px;
        }
        
        ul {
            width: 700px;
        }
        
        ul li {
            overflow: hidden;
            position: relative;
            list-style: none;
            float: left;
            width: 70px;
            height: 70px;
            margin-right: 10px;
        }
        
        ul li .small {
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
        
        ul li .big {
            width: 224px;
            display: none;
        }
    </style>

JQuery部分：

<script src="jquery.min.js"></script>
<script>
$(function() {
// 当鼠标移动到ul 里面的li上的时候，

// li的兄弟们变成69px，小图片淡入，大图片淡出（类似于排他思想）
$('ul li').mouseenter(function() {
// 当鼠标进入'.container',让他自己宽度变成700px
$('.container').stop().animate({
width: 650
}, 1000);
// 用animate()方法，将当前li的宽度改成224px
$(this).stop().animate({
width: 224
// 让小图片'.small'淡出，大图片'.big'淡入，
}, 1000).find('.small').stop().fadeOut(1000).siblings('.big').stop().fadeIn(1000);
// 同时进行一个排他思想，让li的亲兄弟变为标准状态（类似于排他思想）
$(this).siblings().stop().animate({
width: 69
}, 1000).find('.small').stop().fadeIn(1000).siblings('.big').stop().fadeOut(1000);
// 当鼠标离开.container盒子，所有的li都变成标准状态

});
$('.container').mouseleave(function() {
// 离开的时候再让'.container'变回原来大小
$('.container').stop().animate({
width: 490
}, 1000);
$('ul li').stop().animate({
width: 69
}, 1000).find('.small').stop().fadeIn(1000).siblings('.big').stop().fadeOut(1000);
})
})
</script>