创建单击缩略图或链接时的放大效果

<div class="thumbnail-container">
  <a href="#" class="thumbnail">
    <img src="thumbnail.jpg" alt="缩略图">
  </a>
</div>

<div class="zoom-container">
  <img src="zoomed.jpg" alt="放大后的图像">
</div>

.thumbnail-container {
  position: relative;
}

.thumbnail {
  display: block;
  width: 200px;
  height: 150px;
  border: 1px solid #ccc;
}

.zoom-container {
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
  width: 400px;
  height: 300px;
  border: 1px solid #ccc;
}

// 获取缩略图和放大容器的元素
var thumbnail = document.querySelector('.thumbnail');
var zoomContainer = document.querySelector('.zoom-container');

// 绑定点击事件
thumbnail.addEventListener('click', function(event) {
  event.preventDefault(); // 阻止默认跳转行为

  // 切换放大容器的显示状态
  if (zoomContainer.style.display === 'none') {
    zoomContainer.style.display = 'block';
  } else {
    zoomContainer.style.display = 'none';
  }
});