本文实例为大家分享了js实现登录拖拽窗口的具体代码,供大家参考,具体内容如下
<强>做这个案例的两个关键点:
1,用js将盒子在可视区域居中显示
本可以用css将盒子用定位的方式居中显示,但是采用js的方法更好些。
方法:
盒子的左值=(可视区域的宽度-盒子自身的宽度)/2,
盒子的顶值=(可视区域的高度-盒子自身的高度)/2,
这样盒子就居中显示
2,先鼠标按下,然后鼠标在整个文档上移动时,盒子的位置跟着鼠标移动
这一点上要注意的点:
1)鼠标按下时,鼠标相对盒子X方向的位置=事件。clienX -盒子的offsetLeft
鼠标相对盒子Y方向的位置=事件。clientY -盒子的offsetTop;
2)鼠标在移动时,盒子的左值=事件。clientX——鼠标相对盒子X方向的位置
盒子的顶值=事件。clientY——鼠标相对盒子Y方向的位置
注意1),2)中的事件。clientX/clientY不是一样的值,他们分别来自不同事件
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比;
& lt; title> Document
& lt; style>
* {
填充:0;
保证金:0;
}
按钮{
宽度:80 px;
高度:30 px;
显示:块;
保证金:0汽车;
background - color: # 3 b7ae3;
边框样式:没有;
border - radius: 5 px;
颜色:# ffffff;
光标:指针;
}
.mask {
位置:绝对的;
上图:0;
宽度:100%;
身高:1000 px;
背景颜色:黑色;
透明度:0.75;
z - index: 99;
}
.login {
宽度:350 px;
高度:汽车;
边界:1 px固体# fff;
位置:绝对的;
上图:0;
左:0;
z - index: 1000;
}
.title {
宽度:330 px;
高度:50 px;
padding-left: 20 px;
行高:50 px;
background - color: # eee;
位置:相对;
光标:移动;
}
跨度{
位置:绝对的;
右:10 px;
字体大小:30 px;
粗细:300;
光标:指针;
}
.current {
填充:10 px 15 px;
background - color: # fff;
}
.user,
.password {
margin-bottom: 10 px;
}
.pt {
宽度:308 px;
高度:40像素;
padding-left: 10 px;
}
。submit {
宽度:320 px;
高度:48 px;
background - color: # 3 b7ae3;
颜色:# fff;
字体大小:16 px;
边框样式:没有;
光标:指针;
}
& lt;/style>
& lt; script>
窗口。onload=function () {//获取元素
函数(id)美元{返回. getelementbyid (id);}//获得可视区域的大小
var clientwidth=document.documentElement。clientWidth | | document.body.clientWidth;
var clientHeight=document.documentElement。clientHeight | | document.body.clientHeight;//点击登录按钮
$ (" btn”)。onclick=function () {//创建面具
var=document.createElement面具(" div ");
面具。className=懊婢摺?//掩码的高度等于可视化区域的高度
mask.style。身高=clientHeight +“px”;
document.body.appendChild(面具);//创建登录
var登录=document.createElement (" div ");
登录。className=暗锹肌?
登录。id=" _login”;
登录。innerHTML=' & lt; div类="标题" id=癬title”比;登录百度账号' + ' & lt;跨度id=肮乇铡弊４恰? lt;/span>“+”& lt;/div>“+”& lt; div类=暗鼻啊弊４? +
' & lt; div类=坝没А痹凇?”& lt;输入类型=拔谋尽眂lass=皃t”占位符=笆只?邮箱/用户名”在“+
“& lt;/div>”+“& lt; div类=懊苈搿痹凇?”& lt;输入类型=拔谋尽眂lass=皃t”占位符=扒胧淙朊苈搿痹凇?
“& lt;/div>”+“& lt; div>”+“& lt;输入类型=鞍磁ァ眂lass=疤峤弧敝?" https://www.yisu.com/zixun/登录”在“+”& lt;/div>;
document.body.appendChild(登录);//设置登录的位置垂直居中
login.style。左=(clientwidth - login.offsetWidth)/2 +“px”;
login.style。顶级=(clientHeight - login.offsetHeight)/2 +“px”;//当窗口改变大小时,登录仍然垂直居中显示
窗口。onresize=function () {
如果窗口。innerWidth !=null)//ie9 +及新的浏览器
{
clientwidth=window.innerWidth;
clientHeight=window.innerHeight;
}
else if (document.compatMode==癈SS1Compat”)//标准模式
{
clientwidth=document.documentElement.clientX;
clientHeight=document.documentElement.clientY;
}
其他的
{
clientwidth=document.body.clientX;
clientHeight=document.body.clientY;
}
login.style。左=(clientwidth - login.offsetWidth)/2 +“px”;
login.style。顶级=(clientHeight - login.offsetHeight)/2 +“px”;
mask.style。身高=clientHeight +“px”;
}//鼠标按下标题实现拖拽
$ (" _title”)。onmousedown=函数(事件){
var=事件| | window.event;//鼠标相对盒子的位置
var moveX=事件。clientX - login.offsetLeft;
var moveY=事件。clientY - login.offsetTop;
文档。onmousemove=函数(事件){
var=事件| | window.event;//鼠标移动时的位置
var clientX1=event.clientX;
var clientY1=event.clientY;//盒子的偏移量=当前鼠标的位置,鼠标按下时相对盒子的位置
var loginX=clientX1 - moveX;
var loginY=clientY1 - moveY;//判断登录的位置是否超过可视区域
如果(loginX & lt;=0)
{
loginX=0;
}
else if (loginX祝辞=clientwidth - $ (“_login”) .offsetWidth)
{
loginX=clientwidth - $ (“_login”) .offsetWidth;
}
如果(loginY & lt;=0)
{
loginY=0;
}
else if (loginY祝辞=clientHeight - $ (“_login”) .offsetHeight)
{
loginY=clientHeight - $ (“_login”) .offsetHeight;
}
(“_login”) .style美元。左=loginX +“px”;
(“_login”) .style美元。顶级=loginY +“px”;
}
文档。onmouseup=function () {
文档。onmousemove=零;
}//点击叉号关闭
美元(“关闭”)。onclick=function () {
document.body.removeChild(面具);
document.body.removeChild(登录);
}
}
}
}
& lt;/script>
& lt;/head>
& lt; body>
& lt;按钮id=" btn "祝辞登录& lt;/button>
& lt; !类——& lt; div="面具" id=" _mask祝辞& lt;/div>
& lt; div类="登录" id=癬login”比;
& lt; div类="标题" id=癬title”比;
登录百度账号
& lt;跨度id=肮乇铡弊４恰? lt;/span>
& lt;/div>
& lt; div类=暗鼻啊北?
& lt; div类="用户"比;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
