使用HTML+CSS+JavaScript实现手风琴效果

效果图

CSS部分

<style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
        }
        div {
            width: 1200px;
            height: 400px;
            margin: 50px auto;
            /* 溢出部分隐藏 */
            overflow: hidden;
        }
        div li {
            width: 240px;
            height: 400px;
            float: left;
            transition: all 500ms;
        }
        div ul {
            width: 1200px;
        }
</style>

HTML部分

 <div class="box">
        <ul>
            <li>
                <a href="">
                    <img src="./images/1.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/2.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/3.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/4.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/5.jpg" alt="">
                </a>
            </li>
        </ul>
</div>

JavaScript部分

<script>
        let lis = document.querySelectorAll('li')  //获取所有li
        for (let i = 0; i< lis.length; i++) {
            //使用排他思想  鼠标移入li的宽度变成800px  其他li宽度变成100px
            lis[i].addEventListener('mouseenter',function(){
                for (let j = 0; j < lis.length; j++){
                    lis[j].style.width = '100px'
                }
                this.style.width = '800px'
            })
            lis[i].addEventListener('mouseleave',function(){
                // 鼠标移出li 所有li宽度变成240px
                for(let j = 0; j < lis.length ; j++) {
                    lis[j].style.width = '240px'
                }
            })
        }
</script>