原生JS实现可拖拽登录框
更新时间：2021年10月19日 11:47:24 作者：aiguangyuan
这篇文章主要为大家详细介绍了原生JS实现可拖拽登录框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文分享一个用原生JS实现的可拖拽登录框，效果如下：
实现的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现可拖拽登录框</title>
<style type="text/css">
body {
/* 背景图 */
background: url(images/0.png) #fff top center no-repeat;
padding: 0px;
margin: 0px;
font-size: 12px;
font-family: "微软雅黑";
}
.link {
text-align: right;
line-height: 20px;
padding-right: 40px;
}
.ui-dialog {
width: 380px;
height: auto;
display: none;
position: absolute;
z-index: 9000;
top: 0px;
left: 0px;
border: 1px solid #D5D5D5;
background: #fff;
}
.ui-dialog a {
text-decoration: none;
}
.ui-dialog-title {
height: 48px;
line-height: 48px;
padding: 0px 20px;
color: #535353;
font-size: 16px;
border-bottom: 1px solid #efefef;
background: #f5f5f5;
cursor: move;
user-select: none;
}
.ui-dialog-closebutton {
width: 16px;
height: 16px;
display: block;
position: absolute;
top: 12px;
right: 20px;
/* 关闭登录框的图标 */
background: url(images/1.png) no-repeat;
cursor: pointer;
}
.ui-dialog-closebutton:hover {
/* 关闭登录框鼠标悬停时的图标 */
background: url(images/2.png);
}
.ui-dialog-content {
padding: 15px 20px;
}
.ui-dialog-pt15 {
padding-top: 15px;
}
.ui-dialog-l40 {
height: 40px;
line-height: 40px;
text-align: right;
}
.ui-dialog-input {
width: 100%;
height: 40px;
margin: 0px;
padding: 0px;
border: 1px solid #d5d5d5;
font-size: 16px;
color: #c1c1c1;
text-indent: 25px;
outline: none;
}
.ui-dialog-input-username {
/* 输入用户名的图标 */
background: url(images/4.png) no-repeat 2px;
}
.ui-dialog-input-password {
/* 输入密码的图标 */
background: url(images/3.png) no-repeat 2px;
}
.ui-dialog-submit {
width: 100%;
height: 50px;
background: #3b7ae3;
border: none;
font-size: 16px;
color: #fff;
outline: none;
text-decoration: none;
display: block;
text-align: center;
line-height: 50px;
}
.ui-dialog-submit:hover {
background: #3f81b0;
}
.ui-mask {
width: 100%;
height: 100%;
background: #000;
position: absolute;
top: 0px;
height: 0px;
z-index: 8000;
opacity: 0.4;
/*兼容低版本的ie*/
filter: Alpha(opacity=40);
}
</style>
</head>
<body>
<div class="link">
<a href="javascript:showDialog();" >登录</a>
</div>
<!-- 设置一个背景遮罩层,防止鼠标选中事件 -->
<div class="ui-mask" id="mask" onselectstart="return false"></div>
<div class="ui-dialog" id="dialogMove" onselectstart='return false;'>
<div class="ui-dialog-title" id="dialogDrag" onselectstart="return false;">
登录通行证
<a class="ui-dialog-closebutton" href="javascript:hideDialog();" ></a>
</div>
<div class="ui-dialog-content">
<div class="ui-dialog-l40 ui-dialog-pt15">
<input class="ui-dialog-input ui-dialog-input-username" type="input" value="手机/邮箱/用户名" />
</div>
<div class="ui-dialog-l40 ui-dialog-pt15">
<input class="ui-dialog-input ui-dialog-input-password" type="input" value="密码" />
</div>
<div class="ui-dialog-l40">
<a href="#" >忘记密码</a>
</div>
<div>
<a class="ui-dialog-submit" href="#" >登录</a>
</div>
<div class="ui-dialog-l40">
<a href="#" >立即注册</a>
</div>
</div>
</div>
<script type="text/javascript">
//声明获取元素对象方法
function $(id) { return document.getElementById(id); }
//声明自动居中元素方法（el = Element）
function autoCenter(el) {
//获得网页可视区域的宽和高
var bodyW = document.documentElement.clientWidth;
var bodyH = document.documentElement.clientHeight;
//获得传入元素的实际宽和高
var elW = el.offsetWidth;
var elH = el.offsetHeight;
//设置元素的left为可视区域的宽度减去自身宽度的值除以2,top同理
el.style.left = (bodyW - elW) / 2 + 'px';
el.style.top = (bodyH - elH) / 2 + 'px';
}
//自动扩展元素到全部显示区域
function fillToBody(el) {
//设置当前元素的宽度和高度为可视区域的宽和高
el.style.width = document.documentElement.clientWidth + 'px';
el.style.height = document.documentElement.clientHeight + 'px';
}
//设定鼠标在X和Y方向的初始值为0
var mouseOffsetX = 0;
var mouseOffsetY = 0;
//是否可拖拽的标记
var isDraging = false;
//鼠标事件1——计算鼠标相对拖拽元素的左上角的坐标，并且标记元素为可扡动
$('dialogDrag').addEventListener('mousedown', function (e) {
//兼容IE鼠标事件机制
var e = e || window.event;
//鼠标的偏移等于当前事件鼠标按下去的时候X 的坐标减去登录浮层相对于页面左边的位置
mouseOffsetX = e.pageX - $('dialogMove').offsetLeft;
//鼠标的偏移等于当前事件鼠标按下去的时候Y的坐标减去登录浮层相对于页面顶边的位置
mouseOffsetY = e.pageY - $('dialogMove').offsetTop;
//设置可拖动标记为true;
isDraging = true;
})
//鼠标事件2——鼠标移动时，检测元素是否标记为可移动，
//如果是，则更新元素的位置，到当前鼠标的位置(要减去第一步中获得的偏移)
document.onmousemove = function (e) {
//兼容IE鼠标事件机制
var e = e || window.event;
//获取鼠标当前页面(网页左上角)的位置,e.pageX与e.pageY与鼠标按下时值不同
var mouseX = e.pageX;
var mouseY = e.pageY;
//记录鼠标移动事件发生时的x坐标和y坐标
var moveX = 0;
var moveY = 0;
//如果当前可以拖动
if (isDraging === true) {
//拖动元素的位置等于鼠标相对于页面位置减去鼠标相对于拖动元素左上角的位置
moveX = mouseX - mouseOffsetX;
moveY = mouseY - mouseOffsetY;
//获取页面最大宽度和最大高度(注意clientWidth和offsetWidth的区别)
var pageWidth = document.documentElement.clientWidth;
var pageHeight = document.documentElement.clientHeight;
//浮层对象的宽度和高度
var dialogWidth = $('dialogMove').offsetWidth;
var dialogHeight = $('dialogMove').offsetHeight;
//计算可拖动的最大值
var maxX = pageWidth - dialogWidth;
var maxY = pageHeight - dialogHeight;
//做判断，防止拖拽出允许范围
moveX = Math.min(maxX, Math.max(0, moveX));
moveY = Math.min(maxY, Math.max(0, moveY));
//设置拖动元素的新值
$('dialogMove').style.left = moveX + 'px';
$('dialogMove').style.top = moveY + 'px';
}
}
//鼠标事件3——鼠标松开的时候，标记元素为不可扡动
document.onmouseup = function () {
isDraging = false;
}
//展现登录框
function showDialog() {
$('dialogMove').style.display = 'block';
$('mask').style.display = 'block';
//登录框居中显示
autoCenter($('dialogMove'));
//设置遮罩层充满显示区域
fillToBody($('mask'))
}
//隐藏登录框
function hideDialog() {
$('dialogMove').style.display = 'none';
$('mask').style.display = 'none';
}
//当改变窗口大小时的处理函数
window.onresize = function () {
//登录框居中显示
autoCenter($('dialogMove'));
//如果登录框显示就执行遮罩层显示函数
if ($('dialogMove').style.display === 'block') {
fillToBody($('mask'))
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
详解小程序BackgroundAudioManager踩坑之旅
这篇文章主要介绍了详解小程序BackgroundAudioManager踩坑之旅,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要为大家详细介绍了js遮罩效果制作弹出注册界面效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了JavaScript设计模式中的观察者模式，观察者设计模式适用于监听一对多的操作，例如监听对象属性的修改等等，观察者模式能够降低代码耦合度，提升可扩展性2022-06-06
这篇文章主要为大家详细介绍了JS实现音乐钢琴特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
JavaScript函数式编程(Functional Programming)高阶函数(Higher order fun
这篇文章主要介绍了JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions),结合实例形式分析了javascript函数式编程高级函数的概念、原理、用法及相关操作注意事项,需要的朋友可以参考下2019-05-05
得到当前行的值的javascript代码...2007-06-06
快速掌握WordPress中加载JavaScript脚本的方法
这篇文章主要介绍了快速掌握WordPress中加载JavaScript脚本的方法,以及响应的CSS样式加载方法的简介,需要的朋友可以参考下2015-12-12
本文主要介绍了DOM事件的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
在很多情况下，点要素图层中的要素数量可能会成百上千，如果一个点要素图层中的点数量很多，我们就会采取图层聚合的方式对其进行处理，本文就来介绍一下，感兴趣的可以了解一下2021-09-09
本篇文章主要是对js数组去重的三种常用方法进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
最新评论