jsoo封装灯箱-CSDN博客

本文链接：https://blog.csdn.net/qq_46703611/article/details/130854925

这两天回顾jsoo，看到一些有意思的东西，比如封装，并写了一些封装的东西。

比如封装灯箱啊，封装轮播图啊等等，话不多说上代码。

html

<!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>封装灯箱</title>
    <link rel="stylesheet" href="./dome.css" />
  </head>
  <body>
    <div class="Z-item">
      <figure>
        <img
          src="https://ts1.cn.mm.bing.net/th?id=OIP-C.De4iKAMeTvWwPQxXNK74ZgHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
          width="350"
          height="234"
        />
        <figcaption>黄浦江上的的卢浦大桥1</figcaption>
      </figure>
      <figure>
        <img
          src="https://ts1.cn.mm.bing.net/th?id=OIP-C.7-6n_pwnAPz_IkgyRuRI2wHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
          width="350"
          height="234"
        />
        <figcaption>黄浦江上的的卢浦大桥2</figcaption>
      </figure>
      <figure>
        <img
          src="https://ts1.cn.mm.bing.net/th?id=OIP-C.mH9YLFEL5YdVxJM82mjVJQHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
          width="350"
          height="234"
        />
        <figcaption>黄浦江上的的卢浦大桥3</figcaption>
      </figure>
      <figure>
        <img
          src="https://ts2.cn.mm.bing.net/th?id=OIP-C.jl4pPK40IUmDL_-Wu0yMqgHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
          width="350"
          height="234"
        />
        <figcaption>黄浦江上的的卢浦大桥4</figcaption>
      </figure>
      <figure>
        <img
          src="https://ts4.cn.mm.bing.net/th?id=OIP-C.N0USLldg_iKDGVKT12vB4AHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
          width="350"
          height="234"
        />
        <figcaption>黄浦江上的的卢浦大桥5</figcaption>
      </figure>
      <figure>
        <img
          src="https://ts3.cn.mm.bing.net/th?id=OIP-C.nelCIKYD30NJW6W68-ZHxAHaJA&w=226&h=275&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
          width="350"
          height="234"
        />
        <figcaption>黄浦江上的的卢浦大桥6</figcaption>
      </figure>
      <figure>
        <img
          src="https://ts3.cn.mm.bing.net/th?id=OIP-C.Q5v9A7pG3XIaTHTrRCUbSQHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
          width="350"
          height="234"
        />
        <figcaption>黄浦江上的的卢浦大桥7</figcaption>
      </figure>
      <figure>
        <img
          src="https://ts4.cn.mm.bing.net/th?id=OIP-C.Fx6P4aoVRKGGircQ7tgtggHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
          width="350"
          height="234"
        />
        <figcaption>黄浦江上的的卢浦大桥8</figcaption>
      </figure>
      <figure>
        <img
          src="https://ts2.cn.mm.bing.net/th?id=OIP-C.d0uSI7WjUmxhaR_MXssxRQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
          width="350"
          height="234"
        />
        <figcaption>黄浦江上的的卢浦大桥9</figcaption>
      </figure>
    </div>

    <script src="./deme.js"></script>
  </body>
</html>

css

* {
  padding: 0;
  margin: 0;
}

.Z-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
figure {
  position: relative;
  width: 32%;
  height: 200px;
  margin-bottom: 10px;
}

figcaption {
  color: white;
  position: absolute;
  right: 5px;
  bottom: 50%;
  right: 30%;
  width: 200px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  margin: auto;
  /* display: none; */
  border: 1px solid #fff;
}
.Z-item figure:hover figcaption {
  display: inline-block;
}

figure > img {
  width: 100%;
  height: 200px;
}

#domebox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #2177b8;
  z-index: 999;
}

#domebox img {
  display: block;
  margin: auto;
  max-width: 80%;
  max-height: 60%;
  margin-top: 15%;
}

#domebox figure {
  position: absolute;
  top: 20%;
  left: 30%;
  width: 32%;
  height: 400px;
}

#domebox a {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
}

#domebox .prev {
  left: 2%;
  line-height: 50px;
  background-color: white;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
}

#domebox .next {
  right: 2%;
  background-color: white;
  background-position: center;
  background-repeat: no-repeat;
  line-height: 50px;
  background-size: 60%;
}

#domebox .close {
  background-color: white;
  color: black;
  top: 2%;
  right: 2%;
  width: 42px;
  height: 42px;
  line-height: 42px;
}

 var domebox = function () {
     var figures = document.querySelectorAll(".Z-item figure");
     var current = 0;
     const dome = document.createElement('div');
     //点击图片显示
     var show = function (index) {
          dome.style.display = "block";
          current = index;
          update();
     };
      //隐藏
     var hide = function () {
          dome.style.display = "none";
     };
     
     var update = function () {
          var image = figures[current];
          var img = image.querySelector("img");
          var figcaption = image.querySelector("figcaption");
          dome.querySelector("img").src = img.src;
          dome.querySelector("figcaption").textContent = figcaption.textContent;
     };
     // 下一页
     var next = function () {
          current = (current + 1) % figures.length;
          update();
     };
     // 向前翻页
     var prev = function () {
          current = (current + figures.length - 1) % figures.length;
          update();
     };
     // 初始化灯箱
     var init = function () {
          dome.setAttribute('id', "domebox")
          document.body.appendChild(dome)
          console.log(document);
          dome.innerHTML = `
         <a class="prev">上一页</a>
         <figure>
         <img src="" alt="" />
         <figcaption></figcaption>
         </figure>
         <a class="next">下一页</a>
         <a class="close">关闭</a> `
          var images = document.querySelectorAll(".Z-item figure img");
          var i;
          for (i = 0; i < images.length; i++) {
               images[i].addEventListener("click", (function (index) {
                    return function () {
                         show(index);
                    };
               })(i));
          }
          // 设置下页点击事件
          dome.querySelector(".next").addEventListener("click", next);

          // 设置上页点击事件
          dome.querySelector(".prev").addEventListener("click", prev);

          // 设置关闭点击事件
          dome.querySelector(".close").addEventListener("click", hide);
     };
     return {
          show: show,
          hide: hide,
          init: init
     };
}();
window.addEventListener("load", domebox.init);