前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript 手风琴效果

JavaScript 手风琴效果

作者头像
Nian糕
修改2024-03-16 16:59:56
1.6K0
修改2024-03-16 16:59:56

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

HTML 结构如下

代码语言:javascript
复制
<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 样式如下

代码语言:javascript
复制
#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 获取到鼠标滑上去的元素、该元素的兄弟元素以及该元素的子元素,实现相应的自定义动画

代码语言:javascript
复制
$("#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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.12.19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档