JS怎么實(shí)現(xiàn)圖片推拉門效果

可以使用JavaScript和CSS來實(shí)現(xiàn)圖片推拉門效果。以下是一種實(shí)現(xiàn)方式：

HTML部分：

<div class="container">
  <div class="door">
    <div class="front">
      <img src="image.jpg" alt="Image">
    </div>
    <div class="back">
      <img src="image.jpg" alt="Image">
    </div>
  </div>
</div>

CSS部分：

.container {
  width: 400px;
  height: 300px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}

.door {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  transition: transform 0.5s;
}

.front {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.back {
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

JavaScript部分：

const door = document.querySelector('.door');
let isOpen = false;

door.addEventListener('click', function() {
  if (!isOpen) {
    door.style.transform = 'translateX(100%)';
    isOpen = true;
  } else {
    door.style.transform = 'translateX(0)';
    isOpen = false;
  }
});

以上代碼實(shí)現(xiàn)了一個(gè)圖片推拉門效果，點(diǎn)擊圖片可以打開或關(guān)閉門。CSS部分定義了門的樣式和動(dòng)畫效果，JavaScript部分通過監(jiān)聽點(diǎn)擊事件來切換門的狀態(tài)。