下面是“Javascript查看大图功能代码实现”的详细攻略：

1. HTML结构

首先需要在HTML中创建一个图片列表的结构，例如：

 <ul class="picture-list">
     <li>
         <img src="1.jpg" alt="图片1">
     </li>
     <li>
         <img src="2.jpg" alt="图片2">
     </li>
     <li>
         <img src="3.jpg" alt="图片3">
     </li>
 </ul>

2. CSS样式

然后需要写一些CSS样式，使得图片列表可以有一定的布局和样式。例如：

ul.picture-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.picture-list li {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
}

.picture-list li img {
  width: 200px;
  height: auto;
  display: block;
  cursor: pointer;
}

3. Javascript代码

最后需要编写Javascript的代码，实现点击小图查看大图的功能。具体实现方式如下：

Step1. 获取图片列表

首先需要获取图片列表，以便于后面为每一张小图添加点击事件。可以用document.querySelector()方法或document.querySelectorAll()方法获取图片列表，例如：

const pictureList = document.querySelectorAll('.picture-list li img');

Step2. 遍历图片列表并为每一张小图添加点击事件

接下来需要遍历图片列表，为每一张小图添加点击事件。当用户点击小图时，应该显示出对应的大图。

为了实现这个功能，我们可以使用JS创建一个DOM节点，用于显示大图。当用户点击小图时，我们再根据点击的小图的src属性，在大图容器中显示其对应的大图。具体实现示例代码如下所示：

function showBigPicture(imgSrc) {
  var bigPicture = document.createElement('div');
  var innerHtml = `<div class="big-picture-wrapper"> 
    <div class="big-picture-header"><span class="close-btn">&times;</span></div>
     <div class="big-picture-content">
        <img src="${imgSrc}"/>
     </div>
   </div>`;
  bigPicture.innerHTML = innerHtml;
  document.body.appendChild(bigPicture);

  const closeBtn = document.querySelector('.close-btn');
  closeBtn.addEventListener('click', function () {
    bigPicture.parentNode.removeChild(bigPicture);
  });
}

Step3. 处理小图的点击事件

我们可以使用addEventListener()方法为小图添加点击事件，例如：

pictureList.forEach(function (item) {
  item.addEventListener('click', function () {
    showBigPicture(this.src);
  });
});

完整代码及示例可见下方代码块：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Javascript查看大图功能代码实现</title>
  <style>
    ul.picture-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .picture-list li {
      display: inline-block;
      margin-right: 10px;
      margin-bottom: 10px;
      position: relative;
    }

    .picture-list li img {
      width: 200px;
      height: auto;
      display: block;
      cursor: pointer;
    }

    .big-picture-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 999;
      display: flex;
      justify-content: center;
      align-items: center
    }

    .big-picture-header {
      position: absolute;
      top: 10px;
      right: 10px;
    }

    .big-picture-header .close-btn {
      font-size: 30px;
      color: white;
      cursor: pointer;
    }

    .big-picture-content img {
      max-width: 100%;
      max-height: 100%;
      display: block;
      margin: auto;
    }
  </style>
</head>

<body>
  <ul class="picture-list">
    <li>
      <img src="https://picsum.photos/id/232/200/300" alt="图片1">
    </li>
    <li>
      <img src="https://picsum.photos/id/237/200/300" alt="图片2">
    </li>
    <li>
      <img src="https://picsum.photos/id/277/200/300" alt="图片3">
    </li>
  </ul>

  <script>
    function showBigPicture(imgSrc) {
      var bigPicture = document.createElement('div');
      var innerHtml = `<div class="big-picture-wrapper"> 
        <div class="big-picture-header"><span class="close-btn">&times;</span></div>
         <div class="big-picture-content">
            <img src="${imgSrc}"/>
         </div>
       </div>`;
      bigPicture.innerHTML = innerHtml;
      document.body.appendChild(bigPicture);

      const closeBtn = document.querySelector('.close-btn');
      closeBtn.addEventListener('click', function () {
        bigPicture.parentNode.removeChild(bigPicture);
      });
    }

    const pictureList = document.querySelectorAll('.picture-list li img');
    pictureList.forEach(function (item) {
      item.addEventListener('click', function () {
        showBigPicture(this.src);
      });
    });
  </script>
</body>

</html>

希望这份攻略能够对您有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Javascript查看大图功能代码实现 - Python技术站

Javascript查看大图功能代码实现

1. HTML结构

2. CSS样式

3. Javascript代码

相关文章