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

本文介绍了如何通过HTML和JavaScript实现实时切换登录/注册页面,并通过URL参数判断跳转来源。通过浮动布局和动画效果,提供直观的滑动操作体验,同时通过indexOf和charAt函数处理主页跳转时的地址变化。
摘要由CSDN通过智能技术生成

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

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

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

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

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

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


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

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

首先我们看看第一个效果是怎么做出来的,博主这边是通过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>

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


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

可以使用 JavaScript实现登录界面和注册面左右切换。以下是一种实现方式: 首先,在 HTML 中添加两个容器,一个用于登录,一个用于注册。并为它们添加一个共同的父容器,用于包含它们。 ```html <div class="container"> <div class="form-container sign-in-container"> <!-- 登录表单 --> </div> <div class="form-container sign-up-container"> <!-- 注册表单 --> </div> <div class="overlay-container"> <!-- 切换按钮 --> <button class="overlay-btn" id="signIn">登录</button> <button class="overlay-btn" id="signUp">注册</button> </div> </div> ``` 接下来,在 CSS 中设置两个表单容器的样式。为了使它们在同一位置,可以使用绝对定位,并将其中一个容器的 `left` 属性设置为 100%,使其隐藏。 ```css .container { position: relative; height: 100vh; } .form-container { position: absolute; top: 0; width: 100%; height: 100%; transition: all 0.6s ease-in-out; } .sign-in-container { left: 0; } .sign-up-container { left: 100%; } ``` 然后,在 JavaScript 中监听登录注册按钮的点击事件,并根据它们的状态切换表单容器的位置。 ```javascript const signInBtn = document.getElementById('signIn'); const signUpBtn = document.getElementById('signUp'); const formContainer = document.querySelector('.container'); signInBtn.addEventListener('click', () => { formContainer.classList.remove('sign-up-mode'); }); signUpBtn.addEventListener('click', () => { formContainer.classList.add('sign-up-mode'); }); ``` 最后,在 CSS 中添加 `.sign-up-mode` 类的样式,用于将注册表单容器显示出来。 ```css .sign-up-mode .sign-in-container { left: -100%; } .sign-up-mode .sign-up-container { left: 0; } ``` 这样,当用户点击登录按钮时,注册表单容器将从右侧滑入,并隐藏登录表单容器。同样地,当用户点击注册按钮时,登录表单容器将从左侧滑出,并显示注册表单容器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

super码力

么么哒,夏天来块儿冰西瓜!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值