前端开发原生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”>

<head>

<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> –>

<!– <div class=”login” id=”login”>

<div class=”title” id=”title”>登录百度账号<a href=”#” class=”close”>x</a></div>

</div>

</div> –>

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”);

‘<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;

//设置登录框的居中显示

//设置遮罩层的高度

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;

}

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;

}

//鼠标弹起时设置为不可拖拽

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可拖动的登录框

实现原理

完整代码

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

实现原理

完整代码

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发