重构JavaScript实现百叶窗手风琴（纯css版和JavaScript版）

已于 2022-10-31 19:05:52 修改
阅读量417 收藏 3
点赞数 1
分类专栏： demo 文章标签： css javascript 重构
于 2022-10-29 21:16:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ceike/article/details/127591632
版权
博客介绍了纯CSS伪类选择浮动版、JavaScript点击交互版的功能实现，还提及了重构相关内容。指出CSS实现功能有限，后续会对其版本重构，同时在重构中发现因不完整循环判断产生有趣现象，还考虑取消重复点击阻止函数部分。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 纯css伪类选择浮动版：

css实现的功能有限，改天吧，css的版也重构下

<!DOCTYPE html>
<html lang="">
  <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>
    <!-- 这是百叶窗的鼠标悬停纯css效果 -->
    <!-- 更多交互，如点击实现请看JavaScript版本 -->
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: rgb(202, 238, 238);
        display: flex;
        /* 影响子类box1 */
        justify-content: center;
      }
      .box1 {
        width: 1100px;
        height: 320px;
        /* background-color: aqua; */
        display: flex;
        justify-content: center;
        position: relative;
        top: 200px;
      }
      .box2 {
        overflow: hidden;
        transition: 0.6s;
        /* 动画放这里不放悬停那效果好 */
      }
      .box2:hover {
        /* 这里补充一个flex-shrink和flex-grow的博客 */
        flex-shrink: 0;
        /* flex-grow: 0; */
        /* 扩展比率 */
      }
      img {
        width: 400px;
      }
    </style>
  </head>
  <!-- 1000、320 -->
  <body>
    <article>
      <!-- 路由问题？这种写法本地能打开 open with livesever 但是正常在浏览器中运行图片缺失；小程序中可能是页面栈的问题，web中呢？-->
      <!-- <div class="box1">
        <div class="box2"><img src="/1.gif" alt="" /></div>
        <div class="box2"><img src="/2.gif" alt="" /></div>
        <div class="box2"><img src="/3.gif" alt="" /></div>
        <div class="box2"><img src="/4.gif" alt="" /></div>
        <div class="box2"><img src="/5.gif" alt="" /></div>
        <div class="box2"><img src="/6.gif" alt="" /></div>
        <div class="box2"><img src="/7.gif" alt="" /></div>
      </div> -->
      <div class="box1">
        <div class="box2"><img src="1.gif" alt="" /></div>
        <div class="box2"><img src="2.gif" alt="" /></div>
        <div class="box2"><img src="3.gif" alt="" /></div>
        <div class="box2"><img src="4.gif" alt="" /></div>
        <div class="box2"><img src="5.gif" alt="" /></div>
        <div class="box2"><img src="6.gif" alt="" /></div>
        <div class="box2"><img src="7.gif" alt="" /></div>
      </div>
    </article>
  </body>
</html>

JavaScript点击交互版

<!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;
      }
      html,
      body {
        height: 100%;
      }

      body {
        background-image: url(./图片1/1.webp);
        background-size: cover;
        background-position: center center;
      }
      ul {
        width: 800px;
        height: 400px;
        background-color: aqua;
        /* margin: 0 auto;
                万能居中 */
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -400px;
        margin-top: -200px;
      }
      li {
        width: 80px;
        height: 400px;
        float: left;
        background-size: cover;
        background-position: center, center;
        transition: 0.4s;
      }
      .open {
        width: 480px;
      }
      li p {
        width: 80px;
        height: 400px;
        background-color: rgba(255, 255, 255, 0.5);
        color: white;
        font-size: 60px;
      }
    </style>
  </head>
  <body>
    <!-- 横版图片效果好 -->
    <ul>
      <li class="open" style="background-image: url(./图片1/1.webp)">
        <p>高冷鞠</p>
      </li>
      <li style="background-image: url(./图片1/2.webp)">
        <p>气质鞠</p>
      </li>
      <li style="background-image: url(./图片1/3.webp)">
        <p>多态鞠</p>
      </li>
      <li style="background-image: url(./图片1/4.webp)"><p>妖娆鞠</p></li>
      <li style="background-image: url(./图片1/5.webp)">
        <p>杀手鞠</p>
      </li>
    </ul>
    <script>
      //获取所有li
      let lis = document.querySelectorAll('li');
      //for循环遍历，添加点击事件
      let showIndex = 0;
      for (let i = 0; i < lis.length; i++) {
        //为每一个li添加标记
        lis[i].index = i;
        lis[i].onclick = function () {
          //      //1.收起li
          // //2.展开li，但不知道哪个展开
          // for(let j=0;j<lis.length;j++){
          //     //空字符串

          //     lis[j].className='';
          // }
          if (showIndex == this.index) {
            return;
          }

          //1.2做标记
          lis[showIndex].className = '';
          this.className = 'open';
          //修改标记值
          showIndex = this.index;
          //3.背景图跟随变化
          //.style 那的内联样式，限制
          document.body.style.backgroundImage = this.style.backgroundImage;
        };
      }
    </script>
  </body>
</html>

重构详解版（这个好理解）：

如果你仔细看过我写的注释，里面有个对初学者来讲很有意思事，是由于不完整的循环判断造成的；自己体会下吧，html和css部分是和上面一样的，没变

<!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;
      }
      html,
      body {
        height: 100%;
      }

      body {
        background-image: url(./图片1/1.webp);
        background-size: cover;
        background-position: center center;
      }
      ul {
        width: 800px;
        height: 400px;
        background-color: aqua;
        /* margin: 0 auto;
                万能居中 */
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -400px;
        margin-top: -200px;
      }
      li {
        width: 80px;
        height: 400px;
        float: left;
        background-size: cover;
        background-position: center, center;
        transition: 0.4s;
      }
      .open {
        width: 480px;
      }
      li p {
        width: 80px;
        height: 400px;
        background-color: rgba(255, 255, 255, 0.5);
        color: white;
        font-size: 60px;
      }
    </style>
  </head>
  <body>
    <!-- 横版图片效果好 -->
    <ul>
      <li class="open" style="background-image: url(./图片1/1.webp)">
        <p>高冷鞠</p>
      </li>
      <li style="background-image: url(./图片1/2.webp)">
        <p>气质鞠</p>
      </li>
      <li style="background-image: url(./图片1/3.webp)">
        <p>多态鞠</p>
      </li>
      <li style="background-image: url(./图片1/4.webp)"><p>妖娆鞠</p></li>
      <li style="background-image: url(./图片1/5.webp)">
        <p>杀手鞠</p>
      </li>
    </ul>
    <script>
      // 1.点击当前li标签，添加open属性；同时其他的li类名置位空
      // 背景跟随当前li标签，渲染内容
      // 该死的this

      // lis数组储存所有li，nodelist类数组对象长度为五
      let lis = document.querySelectorAll('li');
      // showindex设置原因往下看
      let showIndex = 0;
      for (i = 0; i < lis.length; i++) {
        //给每个li一个index下标
        lis[i].index = i;
        // console.log(lis);
        // lis中的每个li被点击都会触发function函数
        lis[i].onclick = function () {
          // 当重复点击的场景下
          // 这时候我们需要一个showIndex来存储并比较当前下标
          if (showIndex == this.index) {
            return;
          }
          // 这是解决重复点击场景的一种解决方案，
          // 如果不是重复点击执行下面函数
          // 把lis中所有showinde下的classname置位0；是为了先清空open属性
          lis[showIndex].className=''
          // console.log(lis);
          // 然后单独为当前角标showindex添加open属性（类名）
          this.className='open'
          // 这行代码首先在我们重复点击的时候，阻止了实际出现的bug，
          // 你可以去掉这行然后试试，然后你会体会到一个完整的逻辑函数，体会他的奥妙
          showIndex=this.index
          // 背景图适应就这一行代码
          document.body.style.backgroundImage=this.style.backgroundImage
        };
      }
    </script>
  </body>
</html>

再次重构，发现重复点击阻止函数部分似乎可以取消

<script>
    // 1.获取所有li并为每个li添加标记
    let list = document.querySelectorAll('li');
    let showIndex1 = 0;
    // showIndex1的作用有两处

    for (i = 0; i < list.length; i++) {
      // 每个li的标记为index1并结合li自身下标
      list[i].index1 = i;
      // 给每个li添加点击事件,点击增加类名效果
      list[i].onclick = function () {
        // 不触发的情况下：重复点击场景
        // 假定条件，如果showindex和index1相等，也就是执行过这个点击事件，函数触发过，第一次这个if条件必定不执行，这里不执行直接return不执行下面;但是浏览器难道默认阻止了这种函数？为什么我这种没销毁的重复点击，即使是背景图也没看到页面刷新
        // 也许需要一个测试工具
        // 如果浏览器默认否定，这里可作为上线版本的压缩之前版本
        // if(showIndex1=this.index1){
        //   return;
        // }

        // 本次重构发现如果这个if似乎不影响，可能对性能有影响，函数销毁问题，确实是，在刷的算法力扣中为了性能要加这步骤，但新手理解可删掉这步再看
        list[showIndex1].className = '';
        // 但是到这依然不能真正置空，现在在一个遍历中，不清楚发生了什么，似乎要跳出
        this.className = 'open';
        // 反复打开撑开盒子，溢出隐藏能解决一部分；但不如
        // 设置同时其他盒子class类名置为空
        // 同时要先置为空
        // 这里代码和逻辑并不是顺序下来的!!!重点计算机理解和人的理解,还是有些地方不太清楚
        //  当点击的时候，showindex1的值就是index1；之后继续执行遍历
        showIndex1 = this.index1;
          // console.log(list);
          document.body.style.backgroundImage=this.style.backgroundImage
      };
    }
  </script>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白村第一深情

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值