【web】【DOM】-手风琴

最新推荐文章于 2024-08-09 21:30:00 发布

.山间的风

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量69

点赞数

分类专栏：小白例子文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_46911043/article/details/127376327

版权

小白例子专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇文章介绍了一段HTML和JavaScript代码，实现了图片手风琴效果，点击每个角色图片会切换到全屏展示，背景也随之改变。通过CSS和JavaScript，用户可以浏览如胡歌、梅长苏等角色的图片，体验动态视觉切换。

摘要由CSDN通过智能技术生成

图片手风琴（胡歌）

描述

点击图片展开对应图片并设置到背景

效果

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      body {
        height: 100vh;
        background-image: url(http://5b0988e595225.cdn.sohucs.com/images/20190802/b8f5bfce45a44812808704e565563ace.jpeg);
        background-size: cover;
        background-position: center center;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      ul {
        width: 800px;
        height: 400px;
      }

      li {
        width: 80px;
        height: 100%;
        float: left;
        background-size: cover;
        background-position: center center;
        transition: 0.3s;
      }

      li p {
        width: 80px;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.5);
        color: white;
        font-size: 60px;
      }

      .open {
        width: 480px;
      }
    </style>
  </head>

  <body>
    <ul>
      <li
        class="open"
        style="
          background-image: url(http://yweb3.cnliveimg.com/1423/img/2021/0914/210914160205826_402.jpg);
        "
      >
        <p>胡歌</p>
      </li>
      <li
        style="
          background-image: url(https://img2.baidu.com/it/u=3730144730,1953788662&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=333);
        "
      >
        <p>梅长苏</p>
      </li>
      <li
        style="
          background-image: url(http://img2015.zdface.com/20170704/411ca4dc3373ee4f7f0a5ebabfeebcb3.jpg);
        "
      >
        <p>郑秋冬</p>
      </li>
      <li
        style="
          background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201601%2F04%2F20160104230836_y8tiW.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668603230&t=255f8239a90ac2883e307355b191c8f9);
        "
      >
        <p>李逍遥</p>
      </li>
      <li
        style="
          background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp2.ssl.cdn.btime.com%2Ft01582e906c27977c2b.jpg%3Fsize%3D557x370&refer=http%3A%2F%2Fp2.ssl.cdn.btime.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668603297&t=ce2d7948011784ce53f379b90d365ff8);
        "
      >
        <p>景天</p>
      </li>
    </ul>
  </body>
  <script>
    var lis = document.getElementsByTagName("li");
    for (var i = 0; i < lis.length; i++) {
      lis[i].onclick = function () {
        for (var j = 0; j < lis.length; j++) {
          lis[j].className = "";
        }
        this.className = "open";
        document.body.style.backgroundImage = this.style.backgroundImage;
      };
    }
  </script>
</html>