南宁小程序开发：www.zkelm.com
今天的主题是做一个 移动的登录model框， 支持移动 拖放！
1.首先先用HTML css 来设计一个登录界面， 确实要快的话就是直接引用layui 一样的框架就行， 简单粗暴，但是现在因为是学习，所以还是手打代码 自己diy一个，
html代码如下：这里就不一一解析了，
我要评论<html>
<head>
<meta charset="utf-8">
<title>移动摩斯框</title>
<style>
*{margin: 0;padding: 0;}
.box{
width:360px;
height:180px;
border:1px solid #aaa;
margin:10px;
box-sizing:border-box;
position: absolute;
}
.title{
height:40px;
width: 100%;
text-align:center;
background-color: #ccc;
font-size: 20px;
line-height: 40px;
font-weight:600;
color:#333;
}
.content{
width:100%;
height:100px;
background-color: #eee;
padding: 10px;
box-sizing:border-box;
}
.items{
width:100%;
height: 40px;
margin-left: 10px;
}
input{
height:24px;
outline: none;
width:68%
}
button{
width:150px;
height:30px;
margin:5px auto;
display: block;
}
.sub{
width: 100%;
height: 30px;
}
label{font-size: 16px;color:#444;}
</style>
</head>
<body>
<div class="box">
<div class="title">用户登录</div>
<div class="content">
<div class="items"><label for="n">账户：</label><input id="n" type="text"></div>
<div class="items"><label for="p">密码：</label><input id="p" type="password"></div>
</div>
<div class="sub">
<button class="submit">登录</button>
</div>
</div>
</body>
</html>
完整的javascript控制代码如下：
<script>
//添加mousedown事件
document.getElementById("title").onmousedown=function(e){
document.body.style="background:#eee;opacity:0.8";
var box=document.querySelector(".box");
//先计算鼠标在page中得坐标
Eventleft=e.pageX-box.offsetLeft;
Eventtop=e.pageY-box.offsetTop;
//写移动事件
document.addEventListener("mousemove",move);
function move(e){
//设置left 和Top则会产生移动
box.style.left=(e.pageX-Eventleft)+"px";
box.style.top=(e.pageY-Eventtop)+"px";
}
//绑定onmouseup 鼠标松开时候的事件
document.onmouseup=function(){
//移除监听事件!
document.removeEventListener("mousemove",move);
document.body.style="";
}
}
</script>
重点难点： 主要就是计算 box 与边框的距离。 因为书本的 mousemove 事件 只能计算出 e.pageX 和 e.pageY 的值，
当鼠标在不断得移动的时候，我们要不断的计算出left得值 并用 style.left= 鼠标移动的值.
好咧 ，教程介绍完毕， 不懂的欢迎加微信咨询，顺便宣传一下我们公司.团队
南宁企业oa开发：www.zkelm.com
本文地址：https://blog.csdn.net/zkelm/article/details/107524221
如对本文有疑问， 点击进行留言回复！！
网友评论