JavaScript 手风琴效果

Unsplash

我们之前在 JavaScript 鼠标滑动，图片显示隐藏 这篇博文中实现了一个简化版的手风琴效果，简而言之，手风琴效果能够帮助你，在有限的页面空间内，展示多个内容片段，使得用户能非常友好的实现多个内容片段之间的切换

HTML 结构如下

<div id="box">
    <ul>
        <li>
            <img src="images/n1.jpg">
            <p class="p1">Nian糕 1</p>
            <p class="p2">Nian糕 1</p>
        </li>
        <li>
            <img src="images/n2.jpg">   
            <p class="p1">Nian糕 2</p>
            <p class="p2">Nian糕 2</p>
        </li>
        <li>
            <img src="images/n3.jpg">
            <p class="p1">Nian糕 3</p>
            <p class="p2">Nian糕 3</p>
        </li>
        <li>
            <img src="images/n1.jpg">
            <p class="p1">Nian糕 4</p>
            <p class="p2">Nian糕 4</p>
        </li>
        <li>
            <img src="images/n2.jpg">
            <p class="p1">Nian糕 5</p>
            <p class="p2">Nian糕 5</p>
        </li>
        <li>
            <img src="images/n3.jpg">
            <p class="p1">Nian糕 6</p>
            <p class="p2">Nian糕 6</p>
        </li>
    </ul>
</div>

CSS 样式如下

#box {
    width: 1180px;
    height: 360px;
    border: 4px solid #000;
    margin: 100px auto;
    overflow: hidden;
}
ul {
    width: 2000px;
}
ul li {
    width: 197px;
    height: 360px;
    float: left;
    box-shadow: -4px 0 20px #000;
    position: relative;
}
img {
    width: 980px;
    height: 360px;
}
p {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 360px;
    background: rgba(0,0,0,.3);
    color: #fff;
    text-align: center;
    font-weight: bold;
}
.p1 {
    top: 0px;
}
.p2 {
    bottom: 0px;
}

JS 获取到鼠标滑上去的元素、该元素的兄弟元素以及该元素的子元素，实现相应的自定义动画

$("#box ul li").hover(function(){
    $(this).stop().animate({
        "width": "960px"
    },1000).siblings().stop().animate({
        "width": "44px"
    },1000);
    $(this).find("p").stop().animate({
        "height": "40px",
        "line-height": "40px"
    },1000);
},function(){//鼠标移开实现什么效果
    $("#box ul li").stop().animate({
        "width": "197px"
    },1000);
    $(this).find("p").stop().animate({
        "height": "360px",
        "line-height": "360px"
    },1000);
});

运行结果

本篇的内容到这里就全部结束了，源码我已经发到了 GitHub Source_code 上了，有需要的同学可自行下载，预览效果可点击 effect

End of File

---

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书签约作者献上一发助攻吧，谢谢！^ ^