在做小米官网时，遇到了很多问题，丢酱觉得最需要整理的问题就是网页直接跳转到登录页和注册页时，页面标题和展示的内容不同的问题，以及登录页面注册页面滑块滑动的问题。
丢酱说了这么多，感觉表达的也不是很清楚，不够直白，啥也不说，咱先看看我们要实现的是哪个效果
第一个效果：点击选择左右滑动显示登录页还是注册页；
第二个效果：主页跳转过来的时候可以直接跳转到登录页或者注册页，不仅滑动页面变化，同时地址会有变化有区分区分；
直接打开登录页面地址后面几位截图：
主页跳转到登录页地址后面几位截图：
主页跳转到注册页地址后面几位截图：
现在我们一个一个说，咱不着急哈~
首先我们看看第一个效果是怎么做出来的，丢酱这边是通过div盒子包裹两个form表单去搭建的HTML结构，当选择到登录或者注册页的时候，让相应的form表单整体左滑或者右滑；这里有个注意的点就是要让form浮动排列。
注册页面的结构代码：（因为内容类似 我就没有整体修改，不要介意哈）
效果是这样的
JavaScript代码如下：
// 登录与注册切换
var login = document.querySelector('.login');
var register = document.querySelector('.register');
var nav_slider = document.querySelector('.nav-slider');
var loginForm = document.querySelector('.loginForm');
var registerForm = document.querySelector('.registerForm');
var mi_form = document.querySelector('.mi-form');
register.addEventListener('click', function() {
login.style.color = '#bbb';
register.style.color = '#333';
// console.log(nav_slider.offsetLeft);
console.log(nav_slider.offsetLeft);
// animates(nav_slider, -336);
// console.log(registerForm.offsetLeft);
// animates(login, -457);
nav_slider.style.left = 60 + 'px';
loginForm.style.display = 'none';
loginForm.style.left = '-457px';
animates(registerForm, 45);
registerForm.style.display = 'block';
mi_form.style.marginTop = 397 + 'px';
});
login.addEventListener('click', function() {
login.style.color = '#333';
register.style.color = '#bbb';
nav_slider.style.left = -3 + 'px';
// animates(nav_slider, 0);
animates(loginForm, -400);
loginForm.style.display = 'block';
registerForm.style.display = 'none';
registerForm.style.left = '-457px';
mi_form.style.marginTop = 337 + 'px';
});
// 动画封装函数
function animates(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var step = (target - obj.offsetLeft) / 10;
// console.log("左移", obj, obj.offsetLeft, target);
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// var lefts = step + obj.offsetLeft;
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
callback && callback();
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 20)
}
注意：里面的数值要根据你自己的滑块位置进行调整哦，直接复制丢酱的代码会出问题的哦~
第二个效果首先在主页把跳转链接设置好，再去登录注册页设置。
这里主页搭建做的很简单就两个点击的a链接，方便展示效果就得嘞：
第一步看首页搭建的代码：
登录 | 注册 | 消息通知 |
如果直接跳转到登录注册页面，那个a链接应该是这样子的：
但是看图片上的a链接是 和这样的；仔细观察，你会发现图片上的链接都是在原来的基础上面在最后面加上了一个“？”号和几个字母。这个就是设置了跳转过来显示的地址。（这里不清楚的可以去补充一下关于URL的知识）
我们如何判断是跳转到登录页还是注册页呢，我们可以通过这两个函数来解决这个问题：
indexOf()：获得字符在字符串中的索引号；
charAt()：根据索引号获取字符；
登录页还是注册页的地址不一样的地方是“？”号后面的字母，所以，我们可以先通过indexOf()获得“？”的索引号，让索引号+1就能获得“？”后面的第一个字符的索引号了，接着我们通过charAt()来获得字符，接着就根据字符的不同来确定是登录页还是注册页啦！！！
JavaScript代码如下：
//主页跳转过来
var temp = location.href; //获取地址
console.log(temp);
var num = temp.indexOf("?") + 1; //获取?后一位字符的索引号
if (temp.charAt(num) == "d") { //根据索引号获取字符，判断是登录还是注册
login.style.color = '#333';
register.style.color = '#bbb';
nav_slider.style.left = -3 + 'px';
// animates(nav_slider, 0);
animates(loginForm, -410);
loginForm.style.display = 'block';
registerForm.style.display = 'none';
registerForm.style.left = '-457px';
mi_form.style.marginTop = 337 + 'px';
}
if (temp.charAt(num) == "z") {
document.title = '小米官网-注册';
login.style.color = '#bbb';
register.style.color = '#333';
// console.log(nav_slider.offsetLeft);
console.log(nav_slider.offsetLeft);
// animates(nav_slider, -336);
// console.log(registerForm.offsetLeft);
// animates(login, -457);
nav_slider.style.left = 60 + 'px';
loginForm.style.display = 'none';
loginForm.style.left = '-457px';
animates(registerForm, 45);
registerForm.style.display = 'block';
mi_form.style.marginTop = 397 + 'px';
}
要特别注意的是：这段代码也要写在注册页的js文件里，因为当我们点击首页的登录或者注册按钮时，它就以及跳转到login.html里面了，不会执行首页的js文件啦。
