JavaScriptの練習例：超シンプルでクールな画像アコーディオン効果

アコーディオン効果が非常に人気があり、内容を自由に拡大・縮小できるのでとても美しいです。

特殊効果の要件

マウスを画像に移動すると、現在の画像が拡大され、他の画像が縮小されます。

HTML

<div class="pics">
    <ul id="picList">
        <li><a href="#"><img src="images/pic1.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/pic2.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/pic3.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/pic4.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/pic5.jpg" alt=""></a></li>
    </ul>
</div>

CSS

*{
    margin: 0;
    padding: 0;
}
ul,li,ol{
    list-style: none;
}
img{
    border:none;
}
/* 公用css 结束 */

.pics{
    width: 1000px; /* 1个 600px，4个 100px*/
    margin-left: auto;
    margin-right: auto;
    height: 400px;
    overflow: hidden;
}
.pics ul{
    display: flex;    /* flex 布局让 li 横向排列 */
    justify-content: space-between;  /* 内容靠向两端 */
}
.pics ul li{
    width: 100px;
    height: 400px;
    position: relative;
    overflow: hidden;
    transition:all 0.4s;   /* 过渡动画 */
    flex-grow: 1;   /* 让 li 始终能占满整个 ul ，保证变化过程中 li 之间没有缝隙 */
}
.pics ul li img{
    position: absolute;   /* 确保图片在 li 里显示中间部分 */
    left:50%;
    top:0;
    margin-left: -300px;
}
.pics ul li.active{    /* 有类 active li 宽度为 600px。去掉，就会恢复 100px */
    width: 600px;
}

いくつかの詳細に注意が必要です。

1. liの拡大と縮小のアニメーションはすべてCSS3移行によって完了します
2. liの変更中にli間のギャップを防ぐために、liは次のスタイルを追加します。

 flex-grow: 1; 

liが自動的にulを埋めるようにします。

     3.画像を常にliの中央に保つために、絶対位置が画像に適用されます。liは相対的な位置です。

.pics ul li img{
    position: absolute;
    left:50%;
    top:0;
    margin-left: -300px;
}

JavaScript

let ul = document.getElementById("picList");
let lies = ul.children ;
// 第一个 li 变宽：增加类 active
lies[0].classList.add("active");
// 查找兄弟标签函数
let findSiblings = function(tag){
    let parent = tag.parentNode ;
    let child = parent.children ;
    let sb = [];
    for(let i = 0 ; i <= child.length-1 ; i++ ){
        if( tag !== child[i]){
            sb.push( child[i]);
        }
    }
    return sb ;
};

for( let i = 0 ; i <= lies.length-1 ; i++  ){
    lies[i].addEventListener("mouseenter",function(){
        let siblings = findSiblings(this);
        // 当前标签变宽: 增加类 active
        this.classList.add("active");
        // 兄弟标签变窄
        for(let k = 0 ; k <= siblings.length-1 ; k++ ){
            // 兄弟标签去掉 active
            siblings[k].classList.remove("active");
        }
    });
}

終了しました〜！！