js登陆注册页面左右滑动代码
时间: 2023-09-16 20:15:58 浏览: 39
以下是一个简单的基于JavaScript和CSS实现的登陆注册页面左右滑动效果的代码示例:
HTML结构:
```html
<div class="container">
<div class="login">
<!-- 登录表单 -->
</div>
<div class="register">
<!-- 注册表单 -->
</div>
</div>
```
CSS样式:
```css
.container {
position: relative;
width: 100%;
height: 100%;
overflow-x: hidden;
}
.login {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: transform 0.3s ease-in-out;
}
.register {
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
transition: transform 0.3s ease-in-out;
transform: translateX(100%);
}
```
JavaScript代码:
```javascript
const container = document.querySelector('.container');
const login = document.querySelector('.login');
const register = document.querySelector('.register');
// 点击切换到注册页面
document.querySelector('#to-register').addEventListener('click', () => {
login.style.transform = 'translateX(-100%)';
register.style.transform = 'translateX(0)';
});
// 点击切换到登录页面
document.querySelector('#to-login').addEventListener('click', () => {
login.style.transform = 'translateX(0)';
register.style.transform = 'translateX(100%)';
});
```
在上述代码中,我们使用了CSS的`transform`属性实现了两个表单页面的左右滑动效果,并使用JavaScript监听了两个“切换”按钮的点击事件,分别通过修改`transform`属性的值来实现了页面的切换。