JavaScript 练手小案例：超级简单又炫酷的图片手风琴效果

手风琴效果很流行，可以任意展开收缩内容，甚是好看。

特效要求

鼠标移动到图片上，当前图片放大，其他图片收缩。

HTML

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 的 transition 完成
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");
        }
    });
}

完工~！！