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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏埋名

React UI 组件库【uiw】发布

高品质的UI工具包,基于React 16+的组件库。 ? 为了表示支持,点击 阅读原文 搞点Star,多多益善。

21020
来自专栏技术墨客

React——Fragments特性 转

在我们使用React开发组件的时候,每个React组件都必须返回一个根元素。例如下面这样:

10410
来自专栏逸鹏说道

03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1...

30780
来自专栏24K纯开源

Qt Style Sheet实践(一):按钮及关联菜单

导读      正如web前端开发中CSS(Cascade Style Sheet)的作用一样,Qt开发中也可以使用修改版的QSS将逻辑业务和用户界面进行隔离。...

49350
来自专栏菩提树下的杨过

Flash/Flex学习笔记(26):AS3自定义右键菜单

直接上代码吧,关键地方都加上注释了: var cm:ContextMenu=new ContextMenu(); cm.hideBuiltInItems();/...

230100
来自专栏从零开始学自动化测试

appium+python自动化58-xpath定位

3.class属性唯一的话,可以通过class属性定位到,定位class属性有两种方法

32150
来自专栏老马寒门IT

10-移动端开发教程-移动端事件

在前端的移动Web开发中,有一部分事件只在移动端产生,如触摸相关的事件。接下来给大家简单总结一下移动端的事件。

35680
来自专栏林德熙的博客

.net Framework 源代码 · ScrollViewer 使用原理其他源代码分析

本文是分析 .net Framework 源代码的系列,主要告诉大家微软做 ScrollViewer 的思路,分析很简单。 看完本文,可以学会如何写一个 Scr...

12010
来自专栏Ray学习笔记

Jump Start Bootstrap 第3章

在这一章,我们将开始使用Bootstrap的一些非常有用的HTML组件。诸如按钮、标题(headers)、导航菜单和评论系统的组件经常被用在网站上。通过组件,B...

14220
来自专栏林德熙的博客

win10 uwp 进度条 WaveProgressControl

昨天看到了有个大神做出好看的进度条样式,于是我就去抄袭他的代码,但是发现看不懂,于是本文主要翻译就是大神说这个控件如何做。

11400

扫码关注云+社区

领取腾讯云代金券