js实现登陆注册页面实现，登录页面为登陆表单和图片左右分布，跳转到注册时图片左滑覆盖登录表单，原来位置为注册表单的左右滑动效果

实现登陆注册页面，可以使用 JavaScript 和 CSS 来实现。

首先，需要在 HTML 中创建两个部分的容器，并将它们放在一个父容器中。登录页面要放置一个登陆表单和一张图片，注册页面要放置一个注册表单和一张图片，可以使用 div 标签来实现，如下所示：

<div class="container">
  <div class="login">
    <form>
      <!-- 登陆表单内容 -->
    </form>
    <img src="your-image-url" />
  </div>
  <div class="register">
    <form>
      <!-- 注册表单内容 -->
    </form>
    <img src="your-image-url" />
  </div>
</div>

接下来，使用 CSS 将两个容器水平排列，并设置它们的宽度和高度，以及默认的偏移量，如下所示：

.container {
  display: flex;
  height: 100%;
}

.login,
.register {
  position: relative;
  flex: 1;
  height: 100%;
  overflow: hidden;
}

.login form,
.register form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.login img,
.register img {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.login img {
  left: 0;
  transform: translateX(0);
}

.register img {
  right: 0;
  transform: translateX(100%);
}

这样，登陆页面和注册页面就排列好了，接下来使用 JavaScript 来实现滑动效果。可以使用点击事件来触发滑动效果。

首先，需要获取容器和图片的宽度，以及当前显示的是登陆页面还是注册页面。然后，根据当前显示的页面和将要显示的页面来计算图片的偏移量，并使用 CSS 的 transform 属性来设置它们的位置。具体实现如下：

const container = document.querySelector('.container');
const login = document.querySelector('.login');
const register = document.querySelector('.register');
const loginImg = document.querySelector('.login img');
const registerImg = document.querySelector('.register img');

const imgWidth = loginImg.offsetWidth;
const containerWidth = container.offsetWidth;
let isLoginPage = true;

loginImg.addEventListener('click', handleImgClick);
registerImg.addEventListener('click', handleImgClick);

function handleImgClick() {
  if (isLoginPage) {
    // slide to register page
    loginImg.style.transform = `translateX(-${imgWidth}px)`;
    registerImg.style.transform = `translateX(0)`;
    login.style.transform = `translateX(-${containerWidth}px)`;
    register.style.transform = `translateX(0)`;
    isLoginPage = false;
  } else {
    // slide to login page
    loginImg.style.transform = `translateX(0)`;
    registerImg.style.transform = `translateX(100%)`;
    login.style.transform = `translateX(0)`;
    register.style.transform = `translateX(${containerWidth}px)`;
    isLoginPage = true;
  }
}

这样，就实现了登陆注册页面的滑动效果。