小米官网——主页直接跳转登录页或注册页的制作（详细分析）

题目可以不够直白，啥也不说，咱先看看我们要实现的是哪个效果👇👇👇

第一个效果：点击选择左右滑动显示登录页还是注册页；

第二个效果：主页跳转过来的时候可以直接跳转到登录页或者注册页，不仅滑动页面变化，同时地址会有变化有区分区分；

直接打开登录页面地址后面几位截图：

主页跳转到登录页地址后面几位截图：

主页跳转到注册页地址后面几位截图：

现在我们一个一个说，咱不着急哈~

如果页面做的一模一样有点麻烦，所以博主做了一个能看到效果的简易版助于大家理解，剩下的页面搭建就靠大家自己慢慢回去弄了……

首先我们看看第一个效果是怎么做出来的，博主这边是通过ul>li去搭建的HTML结构，当选择到登录或者注册页的时候，让ul整体左滑或者右滑；这里有个注意的点就是要让li浮动排列，让ul的宽度设置成200%，看有几个li就设置成百分之几百。

结构代码：

  <div class="box">
        <div class="title">
            <div class="dl"><a href="javascript:;">登录</a></div>
            <div class="zc"><a href="javascript:;">注册</a></div>
            <span class="hx"></span>
        </div>
        <ul>
            <li class="one">
                <form action="">
                    <label for="">账号：</label><input type="text"><br>
                    <label for="">密码：</label><input type="text"><br>
                    <button><a href="index.html">登录</a></button>
                </form>
            </li>
            <li class="two">
                <form action="">
                    <label for="">手机号：</label><input type="text"><br>
                    <label for="">验证码：</label><input type="text"><br>
                    <button>注册</button>
                </form>

            </li>
        </ul>
    </div>

JavaScript代码：

<script>
        $(function() {
            $(".title .dl a").on("click", function() {
                $(this).addClass("current");//控制字体颜色
                $(".zc a").removeClass("current");
                $(".hx").css("left", "10px");//控制下划线的位置

                //ul整体移动的效果代码
                $("ul").stop().animate({
                    left: 0
                });
            });
            $(".title .zc a").on("click", function() {
                $(this).addClass("current");
                $(".dl a").removeClass("current");
                $(".hx").css("left", "90px");
                $("ul").stop().animate({
                    left: -400
                });
            });
            var hxs = $(".hx").css("left");
            if (hxs == 10 + "px") {
                $(".dl a").addClass("current");
                $(".zc a").removeClass("current")
            } else {
                $(".zc a").addClass("current");
                $(".dl a").removeClass("current")
            };

        })
    </script>

第二个效果首先在主页把跳转链接设置好，再去登录注册页设置。

这里主页搭建做的很简单就两个点击的a链接👇，方便展示效果就得嘞💛：

第一步看图：

如果直接跳转到登录注册页面，那个a链接应该是这样子的： <a href=”login.html”></a>

但是看图片上的a链接是 <a href=”login.html?denglu”></a>和这样的<a href=”login.html?zhuce”></a>；仔细观察，你会发现图片上的链接都是在原来的基础上面在最后面加上了一个“？”号和几个字母。这个就是设置了跳转过来显示的地址。（这里不清楚的可以去补充一下关于URL的知识）

我们如何判断是跳转到登录页还是注册页呢，我们可以通过这两个函数来解决这个问题：

indexOf()：获得字符在字符串中的索引号；

charAt()：根据索引号获取字符；

登录页还是注册页的地址不一样的地方是“？”号后面的字母，所以，我们可以先通过indexOf()获得“？”的索引号，让索引号+1就能获得“？”后面的第一个字符的索引号了，接着我们通过charAt()来获得字符，接着就根据字符的不同来确定是登录页还是注册页啦！！！

JavaScript代码如下：

  <script>
        $(function() {

            //主页跳转过来
            var temp = location.href; //获取地址
            var num = temp.indexOf("?") + 1; //获取?后一位字符的索引号
            if (temp.charAt(num) == "d") { //根据索引号获取字符，判断是登录还是注册
                $(".dl a").addClass("current");
                $(".zc a").removeClass("current");
                $(".hx").css("left", "10px");
                $("ul").css("left", "0");
            }
            if (temp.charAt(num) == "z") {
                $(".zc a").addClass("current");
                $(".dl a").removeClass("current");
                $(".hx").css("left", "90px");
                $("ul").css("left", "-400px");
            }

        })
    </script>

到这里就结束啦！还有什么不清楚的地方可以评论区聊聊🙋！

从主页跳转过来之后的动图效果展示👇：