jQuery 实现手风琴效果

sdallw

已于 2022-11-28 10:35:20 修改

阅读量1.5k

点赞数

文章标签： jquery 前端 javascript

于 2022-11-28 10:26:52 首次发布

本文链接：https://blog.csdn.net/m0_65627447/article/details/128074836

版权

效果图：

点击相应卡片的标签，那么就会切换至卡片的呈现
如果点击03标签，那么01 02 要一起移动

5个效果图片

基本HTML结构如下：

编写5个li标签，包含span以及图片
设置绝对定位，溢出部分overflow:hidden进行隐藏

基本5个li标签需要使用的绝对定位的居中技巧，使用lef:50%，然后使用margin-lef: - 元素的一半宽度

每个li使用left属性来改变位置，做出span标签部署有层叠的效果：

使用绝对定位以及left参数设定位置，就可以做出这个效果的了。

好了，写到这里基本完成了HTML、CSS部分的代码了，贴出源码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
   
    <style type="text/css">
        * {
            margin: 0; 
            padding: 0;
            font-family: 'Miscrosoft Yahei';
            font-size: 14px;
        }

        .accordion_warp{
            width: 642px;
            height: 350px;
            position: absolute;
            margin-top:50px;
            margin-left: -321px;
            left: 50%;
            overflow: hidden;
        }

        .accordion {
            width: 3210px;
            list-style: none;
        }

        .accordion li,span,div{
            float: left;
        }

        .accordion li span{
            display: block;
            width: 20px;
            height: 350px;
            color: #fff;
            text-align: center;
        }

        .accordion li div{
            width: 622px;
            height: 350px;
        }

        .accordion li:nth-child(1) span{
            position: absolute;
            left: 0;
            background-color: #09E0B5;
        }

        .accordion li:nth-child(1) div{
            position: 20px;
            background: url("images/001.jpg");
        }

        .accordion li:nth-child(2) span{
            position: absolute;
            left: 562px;