JS怎样实现图片推拉门效果

可使用JavaScript和CSS来实现图片推拉门效果。以下是一种实现方式：

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(⑴00%);
  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;
  }
});

以上代码实现了一个图片推拉门效果，点击图片可以打开或关闭门。CSS部份定义了门的样式和动画效果，JavaScript部份通过监听点击事件来切换门的状态。