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

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

HTML部分：

<div class="container">  <div class="door">    <div class="front">      <img src="https://static.jirixiang.com/image/lazy.gif" class="lazy" original="https://static.jirixiang.com/image/nopic320.png" alt="Image">    </div>    <div class="back">      <img src="https://static.jirixiang.com/image/lazy.gif" class="lazy" original="https://static.jirixiang.com/image/nopic320.png" 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;  }});

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