用户名登录名默认架构用户名登录框

转载

mob64ca140c75c7 2024-01-25 20:40:58

文章标签 用户名登录名默认架构百度 css 拖拽 文章分类 架构后端开发

我们在浏览网站的时候经常需要我们登录,才能使用更多的功能. 所以用户对登录的体验就会变得非常重要.目前我们遇到最多的登录方式有两种.一是跳转登录,如天猫,京东,苏宁易购等网站.另一种是在主页弹出登录,如百度腾讯爱奇艺等.

今天我们主要来谈谈第二种登录方式如何用JavaScript实现.

Html和css样式我们就直接给出来

用户名登录名默认架构用户名登录框_拖拽

这个代码包括了登录框的主体box 登录链接login 和蒙版filter.

首先要获取需要的元素(这里我将所有需要的元素全放在下面):

var oBox=document.getElementById("box");
    var oHead=document.getElementById("head");
    var oFilter = document.getElementById("filter");
    var oLogin=document.getElementById("login");
    var oX=document.getElementById("x");

点击登录之前,登录框和蒙版都是隐藏的 display="none"

点击登录显示登录框和蒙版

oLogin.onclick = function(){
        oBox.style.display = "block";
        oFilter.style.display = "block";
    }

点击X号关闭登录框和蒙版

oX.onclick = function(){
        oBox.style.display = "none";
        oFilter.style.display = "none";
    }

这样简单的登录和关闭功能就实现了

登录框都是位于屏幕中心,而不同的网站对登录框的位置处理不同,如腾讯和爱奇艺的登录框是固定在屏幕中心不可移动的

者通过css就可以实现

Position:absolute; left:50%; top:50%; margin-top和margin-botto为登录框宽高的一半.

而百度的登录框的顶部可以拖拽实现登录框在是屏幕范围内移动动,为了实现这种效果,我们在上面的代码基础上添加下面这部分js代码:

//点击头部事件 获取鼠标点击距离head部分的坐标
oHead.onmousedown=function(e){
        var e = e ||event;
        var tisx=e.offsetX;
        var tisy=e.offsetY;
        var h=document.documentElement.clientHeight - oBox.offsetHeight
        var w=document.documentElement.clientWidth - oBox.offsetWidth
//鼠标拖动事件 获取鼠标在可视区的坐标  与鼠标相对head部分的坐标之差 就是box相对于body的left和top距离        实现点击head部分而使head的父级box整体移动
document.onmousemove=function(e){
            e = e || event;
            //由于我们在css中加入margin值来调整登陆框位置 这会影响我们鼠标移动事件中计算left和top的值 所以要将margin值清零 或 在计算过程中加上margin值移动的偏差.
            oBox.style.margin = '0'
            oBox.style.left= e.clientX-tisx+"px";
            oBox.style.top = e.clientY-tisy+"px";
            //我们获取top和 left值 判断是否超出了屏幕的可视区  将登陆框的移动范围限定在屏幕可视区中
if(oBox.offsetTop>h){
                oBox.style.top =h+"px";
            }
            if(oBox.offsetTop<0){
                oBox.style.top =0+"px";
            }
           
            if(oBox.offsetLeft>(w)){
                oBox.style.left=w+"px";
            }
            if(oBox.offsetLeft<0){
                oBox.style.left=0+"px";
            }  
        }

或者我们将上面的冗余的判断用三目运算符来解决:

//先单纯计算出left和top需要移动的值
var l = e.clientX-disX
            var t = e.clientY-disY
            //同样的要清零margin
            oBox.style.margin = "0";
            //三目运算部分  
            l=l>w?w:(l<0?0:l);
            t=t>h?h:(t<0?0:t);
            //在这里将box应移动的距离:left和top的值赋给box
            oBox.style.left = l +"px"
            oBox.style.top = t+ "px"

效果图如下

用户名登录名默认架构用户名登录框_用户名登录名默认架构_02