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

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

HTML部分：

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;
  }
});

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