• 手风琴效果

    效果展示：

    html部分：

    1. <body>
    2.     <div class="container">
    3.         <ul>
    4.             <li>
    5.                 <a href="#">
    6.                     <img src="images/1.jpg" alt="" class="small">
    7.                     <img src="images/1.jpg" alt="" class="big">
    8.                 a>
    9.             li>
    10.             <li>
    11.                 <a href="#">
    12.                     <img src="images/2.jpg" alt="" class="small">
    13.                     <img src="images/2.jpg" alt="" class="big">
    14.                 a>
    15.             li>
    16.             <li>
    17.                 <a href="#">
    18.                     <img src="images/3.jpg" alt="" class="small">
    19.                     <img src="images/3.jpg" alt="" class="big">
    20.                 a>
    21.             li>
    22.             <li>
    23.                 <a href="#">
    24.                     <img src="images/4.jpg" alt="" class="small">
    25.                     <img src="images/4.jpg" alt="" class="big">
    26.                 a>
    27.             li>
    28.             <li>
    29.                 <a href="#">
    30.                     <img src="images/5.jpg" alt="" class="small">
    31.                     <img src="images/5.jpg" alt="" class="big">
    32.                 a>
    33.             li>
    34.             <li>
    35.                 <a href="#">
    36.                     <img src="images/6.jpg" alt="" class="small">
    37.                     <img src="images/6.jpg" alt="" class="big">
    38.                 a>
    39.             li>
    40.  
    41.         ul>
    42.     div>
    43. body>

    css部分：

    1. <style>
    2.         * {
    3.             margin: 0;
    4.             padding: 0;
    5.         }
    6.         
    7.         div {
    8.             box-sizing: border-box;
    9.         }
    10.         
    11.         .container {
    12.             border-radius: 10px;
    13.             width: 490px;
    14.             height: 90px;
    15.             background-color: #eeeddd;
    16.             margin: 0 auto;
    17.             padding: 10px;
    18.         }
    19.         
    20.         ul {
    21.             width: 700px;
    22.         }
    23.         
    24.         ul li {
    25.             overflow: hidden;
    26.             position: relative;
    27.             list-style: none;
    28.             float: left;
    29.             width: 70px;
    30.             height: 70px;
    31.             margin-right: 10px;
    32.         }
    33.         
    34.         ul li .small {
    35.             position: absolute;
    36.             top: 0;
    37.             left: 0;
    38.             width: 69px;
    39.             height: 69px;
    40.             border-radius: 5px;
    41.         }
    42.         
    43.         ul li .big {
    44.             width: 224px;
    45.             display: none;
    46.         }
    47.     style>

    JQuery部分：


       

  • 相关阅读:
    传奇开区网站如何添加流量统计代码
    基于Html的四季春茶销售网设计与实现
    前端实现打字效果
    分布式BASE理论
    艾美捷ProSci 激活素RIB / ACVR1B重组蛋白方案
    怎样选择适合自己的ITSM软件？
    深度学习Hotel-ID打击人口贩卖（1）项目介绍和数据预处理
    UE5、CesiumForUnreal实现加载GeoJson绘制多面（MultiPolygon）功能（支持点选高亮）
    基于JavaWeb（SSM框架）的网上书店的设计与实现
    docker swarm 更改绑定ip
  • 原文地址：https://blog.csdn.net/m0_45142186/article/details/125917425