js开门效果

JS实现开门效果可以通过以下步骤实现：

1. 在HTML中创建一个包含门的div元素，使用CSS设置其大小、位置、背景等样式。
2. 使用JS获取该div元素，以及门的两个子元素（左门和右门）。
3. 使用CSS将左门和右门分别向左和向右移动，直到完全关闭（可以使用CSS3的transition或者JS的动画库来实现）。
4. 给div元素绑定一个点击事件，当点击时使用JS将左门和右门分别向左和向右移动，直到完全打开。

以下是一个简单的示例代码：

HTML:

<div id="door">
  <div class="left-door"></div>
  <div class="right-door"></div>
</div>

CSS:

#door {
  position: relative;
  width: 300px;
  height: 200px;
  background: #ccc;
}

.left-door, .right-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: #fff;
  transition: transform 0.5s;
}

.left-door {
  left: 0;
  transform: translateX(-50%);
}

.right-door {
  right: 0;
  transform: translateX(50%);
}

JS:

var door = document.getElementById('door');
var leftDoor = document.querySelector('.left-door');
var rightDoor = document.querySelector('.right-door');

door.addEventListener('click', function() {
  leftDoor.style.transform = 'translateX(0)';
  rightDoor.style.transform = 'translateX(0)';
});

当div元素被点击时，左门和右门会同时向左和向右移动，打开门的效果就实现了。你可以根据需要调整CSS和JS的细节来达到更好的效果。