前端开发原生js可拖动的登录框

前端开发技能描述
前端开发技能树
web前端开发技能测试

实现原理

1.onmousemove事件触发时不断更新鼠标的pageXY改变位置,
登陆框的偏移量=鼠标当前位置-鼠标到登录框边框的距离

2.onmousedown鼠标摁下时触发事件获取鼠标到登陆框的距离,再设置true允许拖拽

3.onmouseup 鼠标弹起设置false停止拖拽

4.登录框居中显示公式:(可视区域宽高-登录框宽高)/2

5.当浏览器窗口大小变化时触发事件window.onresize 再更新登陆框居中显示

代码中有详细的注释

完整代码

html 代码

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>demo</title>
    <style>
        body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
/*p{font-size: 100px;}*/
#btn{width: 80px;
height:40px;
background:#3b7ae3;
margin:0auto;
display:block;
cursor:pointer;
border-style:none;
color:#fff;
font-size:16px;}
#mask{
background:#000;
opacity:0.75;
filter:alpha(opacity=75);
height:1000px;
width:100%;
position:absolute;
left:0;
top:0;
z-index:1000;
}
#login{position: absolute; top: 100px; left: 100px; width: 400px; height: auto; border:1px solid #d5d5d5; z-index: 1001; }
.title{position: relative;background-color: #f7f7f7; cursor: move; height: 50px; line-height: 50px; font-size: 16px; color: #333; padding-left:30px;}
.close{position: absolute; top:0; right: 10px; color: #ccc;}
.content{background: #fff; padding: 15px 20px;}
.user{margin-bottom: 15px;}
.password{margin-bottom: 15px;}
.pt{display: block;
height:38px;
padding-left:15px;
border:1pxsolid#ddd;
transition:.3s;
font-size:14px;
color:#666;
width:343px;
}
.sm{display: block;
height:48px;
border:1pxsolid#ddd;
transition:.3s;
font-size:16px;
color:#666;
width:360px;
background:#3b7ae3;
color:#fff;}
</style>
</head>
<body>
    <!– <div id=”mask”></div> –>
    <button id=”btn” href=””>登录</button>
    <!– <div class=”login” id=”login”>
<div class=”title” id=”title”>登录百度账号<a href=”#” class=”close”>x</a></div>
<div class=”content”>
<div class=”user”><input class=”pt” type=”input” value=”手机/邮箱/用户名”></div>
<div class=”password”><input class=”pt” type=”input” value=”密码”></div>
<div class=”submit”><input class=”sm” type=”submit” value=”登录”></div>
</div>
</div> –>
    <script type=”text/javascript”>
        function b() {
            //创建遮罩层div并插入body
            var mask = document.createElement(“div”);
            mask.id = “mask”;
            mask.style.height = cheight + “px”;
            //宽度直接用100%在样式里
            document.body.appendChild(mask);
            //创建登录层div并插入body
            var login = document.createElement(“div”);
            login.id = “login”;
            login.innerHTML = ‘<div class=”title” id=”title”>登录百度账号’ + ‘<a href=”#” class=”close”>x</a>’ + ‘</div>’ +
                ‘<div class=”content”>’ + ‘<div class=”user”>’ + ‘<input class=”pt” type=”input” value=”手机/邮箱/用户名”>’ + ‘</div>’ + ‘<div class=”password”>’ + ‘<input class=”pt” type=”input” value=”密码”>’ + ‘</div>’ + ‘<div class=”submit”>’ + ‘<input class=”sm” type=”submit” value=”登录”>’ + ‘</div>’ + ‘</div>’;
            document.body.appendChild(login);
            //窗口可视区域宽度
            var cwidth = document.documentElement.clientWidth || document.body.clientWidth;
            //窗口可视区域高度
            var cheight = document.documentElement.clientHeight || document.body.clientHeight;
            //登录框宽度
            var lwidth = login.offsetWidth;
            //登录框高度
            var lheight = login.offsetHeight;
            //设置登录框的居中显示
            login.style.left = (cwidth – lwidth) / 2 + “px”;
            login.style.top = (cheight – lheight) / 2 + “px”;
            //设置遮罩层的高度
            mask.style.height = cheight + “px”;
            //改变窗口大小后依然居中显示
            window.onresize = function () {
                if (document.compatMode == “CSS1Compat”) {
                    cwidth = document.documentElement.clientWidth;
                    cheight = document.documentElement.clientHeight;
                } else {
                    cwidth = document.body.clientWidth;
                    cheight = document.body.clientHeight;
                }
                login.style.left = (cwidth – lwidth) / 2 + “px”;
                login.style.top = (cheight – lheight) / 2 + “px”;
                mask.style.height = cheight + “px”;
            }
            //获取拖拽容器
            var title = document.getElementById(“title”);
            var isDraging = false;
            var mouseOffsetX;
            var mouseOffsetY;
            //鼠标按下事件
            title.onmousedown = function (e) {
                var e = e || window.event;
                /*var el=e.srcElement;
                if(!el){
                    el=e.target;//兼容火狐
                }*/
                //鼠标相对于登录框的位置
                mouseOffsetX = e.pageX – login.offsetLeft;
                mouseOffsetY = e.pageY – login.offsetTop;
                //鼠标摁下时为true
                isDraging = true;
                /*console.log(mouseOffsetY, mouseOffsetX)*/
            }
            //鼠标移动事件
            document.onmousemove = function (e) {
                var e = e || window.event;
                //鼠标移动时的坐标
                var newMX = e.pageX;
                var newMY = e.pageY;
                //判断为true时可以拖拽
                if (isDraging === true) {
                    //登录框的偏移值=当前位置-鼠标到登录框的距离
                    var loginL = newMX – mouseOffsetX;
                    var loginT = newMY – mouseOffsetY;
                    //如果left top值超过边缘时就让他等于边缘
                    if (loginL < 0) {
                        loginL = 0;
                    } else if (loginL > (cwidth – lwidth)) {
                        loginL = cwidth – lwidth;
                    }
                    if (loginT < 0) {
                        loginT = 0;
                    } else if (loginT > (cheight – lheight)) {
                        loginT = cheight – lheight;
                    }
                    login.style.left = loginL + “px”;
                    login.style.top = loginT + “px”;
                }
            }
            //鼠标弹起时设置为不可拖拽
            document.onmouseup = function () {
                isDraging = false;
            }
            //点击X关闭登录框和弹出层
            var close = login.getElementsByClassName(“close”)[0];
            close.onclick = function () {
                document.body.removeChild(mask);
                document.body.removeChild(login);
            }
        }
        //点击登录弹出登录框和弹出层
        window.onload = function () {
            var btn = document.getElementById(“btn”);
            btn.onclick = function () {
                b();
            }
        }
    </script>
</body>
</html>
前端开发技能
web前端开发涉及的专业技能
web前端开发技能介绍
» 本文来自:前端开发者 » 《前端开发原生js可拖动的登录框》
» 本文链接地址:https://www.rokub.com/6176.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!