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(-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部分通过监听点击事件来切换门的状态。