小米官网登录注册的滑动效果

小米官网登录注册的滑动效果

登录组成页面

            <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属性值，直到达到目标位置时清除定时器并执行回调函数。

• 注意

1. 如果有多显示的内容，或者显示不足，就是登录和注册之间的两个div距离不够，这时候就需要添加他们的左右边距，比如

   <div class="register" style="margin-left: 80px;">

在第二个注册页加上左边距，加了左边距之后需要调整滑动的距离到正确的位置

比如

    animateLeft(rebox, -500, function() {
       console.log('注册页面移动完成');
   });