小米官网登录注册的滑动效果
登录组成页面
<div class="client">
<div class="userbox">
<div class="title">
<a href="javascript:;" class="active" id="DL">登录</a>
<a href="javascript:;" id="ZC">注册</a>
</div>
<div class="rebox" style="display: flex;">
<div class="register r1">
<form id="loginForm" action="#">
<input type="text" name="username" id="username" placeholder="邮箱/手机号码/小米ID" required>
<span class="error" id="er">请输入账号</span>
<div id="pswbox">
<input type="password" name="psw" id="psw" placeholder="密码" required>
<i class="glyphicon glyphicon-eye-close icon3"></i>
<span class="error" id="err">请输入登录密码</span>
</div>
<p>
<input type="checkbox" name="" id="checkbox">
<span>已阅读并同意小米账号<a href="#"> 用户协议 </a> 和 <a href="#">隐私政策</a></span>
</p>
<input type="submit" id="submit" value="登录">
</form>
<div class="zh">
<a href="#">忘记密码？</a>
<a href="#">手机号登录</a>
</div>
<p class="other">其他方式登录</p>
<ul style="list-style-type: none; /* 移除列表项的默认样式（小圆点）*/">
<li><a href=""><img src="./image/images/zfb.png" alt=""></a></li>
<li><a href=""><img src="./image/images/vx.png" alt=""></a></li>
<li><a href=""><img src="./image/images/QQ.png" alt=""></a></li>
<li><a href=""><img src="./image/images/wb.png" alt=""></a></li>
</ul>
</div>
<div class="register" style="margin-left: 80px;">
<form action="#">
<div class="gj">
<input type="text" id="selectedCountry" placeholder="国家/地区">
<i class="icon4"></i>
<div class="gj_name">
<div class="fdj">
<input type="search" placeholder="搜索国家/地区名称" id="gj_search">
<i class="glyphicon glyphicon-search icon5"></i>
</div>
<ul class="country " style="list-style-type: none; /* 移除列表项的默认样式（小圆点）*/">
<li>佛得角</li>
<li>开曼群岛</li>
<li>中非</li>
<li>乍得</li>
<li>智利</li>
<li>中国</li>
<li>圣诞岛</li>
<li>哥伦比亚</li>
</ul>
</div>
</div>
<input type="text" placeholder="国家码" id="gjm">
<span class="error" id="erro">请输入手机号码</span>
<div class="yzm">
<input type="text" placeholder="短信验证码" id="yzm">
<a href="#" class="info">获取验证码</a>
<span class="error" id="eryzm">请输入短信验证码</span>
</div>
<p>
<input type="checkbox" name="" id="checkbox">
<span>已阅读并同意小米账号<a href="#"> 用户协议 </a> 和 <a href="#">隐私政策</a></span>
</p>
<input type="submit" id="sub" value="注册">
<div class="zh">
<a href="#">收不到验证码？</a>
</div>
<p class="other">其他方式登录</p>
<ul style="list-style-type: none; /* 移除列表项的默认样式（小圆点）*/">
<li><a href=""><img src="./image/images/zfb.png" alt=""></a></li>
<li><a href=""><img src="./image/images/vx.png" alt=""></a></li>
<li><a href=""><img src="./image/images/QQ.png" alt=""></a></li>
<li><a href=""><img src="./image/images/wb.png" alt=""></a></li>
</ul>
</div>
</div>
</div>
<div class="erweima">
<div class="glyphicon glyphicon-qrcode ewm"></div>
</div>
</div>
如图
点击注册的时候可以滑动到注册里面，这里可以使用把他使用display:flex包裹住一个大的div，里面有一个登录div，还有一个注册div，然后设置登录与注册之间的外边距调整他们的距离，然后再使用js绑定事件，进行移动，js代码为
var zc = document.getElementById("ZC");
var dl = document.getElementById("DL");
var rebox = document.querySelector('.rebox');
zc.addEventListener("click", function() {
zc.style.borderBottom = '3px solid #ff5c00';
dl.style.borderBottom = 'none';
animateLeft(rebox, -500, function() {
console.log('注册页面移动完成');
});
});
dl.addEventListener("click", function() {
dl.style.borderBottom = '3px solid #ff5c00';
zc.style.borderBottom = 'none';
animateLeft(rebox, 0, function() {
});
});
function animateLeft(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
callback && callback();
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
首先通过document.getElementById和document.querySelector获取到页面中的注册按钮、登录按钮和包含注册登录内容的容器元素。
给注册按钮和登录按钮分别添加点击事件监听器，当点击注册按钮时，注册按钮底部加粗显示，登录按钮取消底部加粗显示，并通过animateLeft函数将包含注册登录内容的容器元素向左移动500px，达到切换效果；当点击登录按钮时，登录按钮底部加粗显示，注册按钮取消底部加粗显示，并通过animateLeft函数将包含注册登录内容的容器元素移动回原位0px。
animateLeft函数用于实现元素的动画移动效果，通过设置定时器不断更新元素的left属性值，直到达到目标位置时清除定时器并执行回调函数。
- 注意
- 如果有多显示的内容，或者显示不足，就是登录和注册之间的两个div距离不够，这时候就需要添加他们的左右边距，比如
<div class="register" style="margin-left: 80px;">
在第二个注册页加上左边距，加了左边距之后需要调整滑动的距离到正确的位置
比如
animateLeft(rebox, -500, function() {
console.log('注册页面移动完成');
});
