登录框的实现方法

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

今天我们主要来谈谈第二种登录方式如何用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"

效果图如下

 

但可拖拽的方式会容易出现一些bug ,如百度登录页面就会出现这个问题,如图

 

当我们将登录框移动到右下时 会出现上下和左右滚动条