js实现登录拖拽窗口
本文实例为大家分享了js实现登录拖拽窗口的具体代码，供大家参考，具体内容如下
做这个案例的两个关键点：
1、用js将盒子在可视区域居中显示
本可以用css将盒子用定位的方式居中显示，但是采用js的方法更好些。
方法：
盒子的left值 = （可视区域的宽度 - 盒子自身的宽度）/ 2;
盒子的top值 = （可视区域的高度 - 盒子自身的高度）/ 2;
这样盒子就居中显示
2、先鼠标按下，然后鼠标在整个文档上移动时，盒子的位置跟着鼠标移动
这一点上要注意的点：
1)鼠标按下时，鼠标相对盒子X方向的位置 = event.clienX- 盒子的offsetLeft
鼠标相对盒子Y方向的位置 = event.clientY - 盒子的offsetTop ;
2)鼠标在移动时，盒子的left值 = event.clientX - 鼠标相对盒子X方向的位置
盒子的top值 = event.clientY - 鼠标相对盒子Y方向的位置
注意 1），2）中的event.clientX/clientY不是一样的值，他们分别来自不同事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
button {
width: 80px;
height: 30px;
display: block;
margin: 0 auto;
background-color:#3b7ae3;
border-style: none;
border-radius: 5px;
color: #ffffff;
cursor: pointer;
}
.mask {
position: absolute;
top:0;
width: 100%;
height: 1000px;
background-color:black;
opacity: 0.75;
z-index: 99;
}
.login {
width: 350px;
height: auto;
border: 1px solid #fff;
position: absolute;
top:0;
left: 0;
z-index: 1000;
}
.title {
width:330px;
height: 50px;
padding-left: 20px;
line-height: 50px;
background-color: #eee;
position: relative;
cursor: move;
}
span {
position: absolute;
right:10px;
font-size: 30px;
font-weight: 300;
cursor: pointer;
}
.current {
padding: 10px 15px;
background-color: #fff;
}
.user,
.password{
margin-bottom: 10px;
}
.pt {
width:308px;
height: 40px;
padding-left: 10px;
}
.submit {
width: 320px;
height: 48px;
background-color:#3b7ae3;
color: #fff;
font-size: 16px;
border-style: none;
cursor: pointer;
}
</style>
<script>
window.onload = function(){
// 获取元素
function $(id) {return document.getElementById(id);}
// 获得可视区域的大小
var clientwidth = document.documentElement.clientWidth || document.body.clientWidth;
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
// 点击登录按钮
$("btn").onclick = function(){
// 创建mask
var mask = document.createElement("div");
mask.className = "mask";
// mask的高度等于可视化区域的高度
mask.style.height = clientHeight + "px";
document.body.appendChild(mask);
// 创建login
var login = document.createElement("div");
login.className = "login";
login.id = "_login";
login.innerHTML = '<div class="title" id="_title"> 登录百度账号 '+' <span id="close">×</span>'+' </div>'+' <div class="current">'+
'<div class="user">'+' <input type="text" class="pt" placeholder="手机/邮箱/用户名">'+
'</div>'+'<div class="password">'+'<input type="text" class="pt" placeholder="请输入密码">'+
'</div>'+'<div>'+' <input type="button" class="submit" value="登录">'+'</div>';
document.body.appendChild(login);
// 设置login的位置垂直居中
login.style.left= (clientwidth - login.offsetWidth)/2 + "px";
login.style.top = (clientHeight - login.offsetHeight)/2 + "px";
// 当窗口改变大小时，login仍然垂直居中显示
window.onresize = function(){
if(window.innerWidth != null) // ie9+及新的浏览器
{
clientwidth = window.innerWidth;
clientHeight = window.innerHeight;
}
else if(document.compatMode == "CSS1Compat")// 标准模式
{
clientwidth = document.documentElement.clientX;
clientHeight = document.documentElement.clientY;
}
else
{
clientwidth = document.body.clientX;
clientHeight = document.body.clientY;
}
login.style.left= (clientwidth - login.offsetWidth)/2 + "px";
login.style.top = (clientHeight - login.offsetHeight)/2 + "px";
mask.style.height = clientHeight + "px";
}
// 鼠标按下title实现拖拽
$("_title").onmousedown = function(event){
var event = event || window.event;
// 鼠标相对盒子的位置
var moveX = event.clientX - login.offsetLeft;
var moveY = event.clientY - login.offsetTop;
document.onmousemove = function(event){
var event = event || window.event;
// 鼠标移动时的位置
var clientX1 = event.clientX;
var clientY1 = event.clientY;
// 盒子的偏移量 = 当前鼠标的位置 - 鼠标按下时相对盒子的位置
var loginX = clientX1 - moveX;
var loginY = clientY1 - moveY;
// 判断login的位置是否超过可视区域
if(loginX <= 0)
{
loginX = 0;
}
else if(loginX >= clientwidth - $("_login").offsetWidth)
{
loginX = clientwidth - $("_login").offsetWidth;
}
if(loginY <= 0)
{
loginY = 0;
}
else if(loginY >= clientHeight - $("_login").offsetHeight)
{
loginY = clientHeight - $("_login").offsetHeight;
}
$("_login").style.left = loginX + "px";
$("_login").style.top = loginY + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
}
// 点击叉号关闭
$("close").onclick = function(){
document.body.removeChild(mask);
document.body.removeChild(login);
}
}
}
}
</script>
</head>
<body>
<button id="btn">登录</button>
<!-- <div class="mask" id="_mask"></div>
<div class="login" id="_login">
<div class="title" id="_title">
登录百度账号
<span id="close">×</span>
</div>
<div class="current">
<div class="user">
<input type="text" class="pt" placeholder="手机/邮箱/用户名">
</div>
<div class="password">
<input type="text" class="pt" placeholder="请输入密码">
</div>
<div >
<input type="button" class="submit" value="登录">
</div>
</div> -->
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现登录框鼠标拖拽效果
效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录框鼠标拖拽效果</title> <style type="text/css"> body { background: url("https://timgsa.baidu.com/timg?i
-
原生js实现弹出层登录拖拽功能
在WEB开发过程中,总会遇到一些从未接触过的需求,总是想尽一切办法去研究,最终实现效果,在实现效果的那一刻成就感爆棚,有木有? 留言墙.弹出框等一些常见地方都有拖拽功能,方便用户体验嘛. 实现拖拽功能 ,三个事件 mousemove , mouseup ,mousedown, 偏移量(offsetLeft, offsetTop , offsetWidth ,offsetHeight),窗口坐标位置(clientX ,clientY ) 以及获取可视区域方法的兼容性处理. 之前做的比较多的留言墙效
-
js实现百度登录框鼠标拖拽效果
以百度的登录窗口为例,学习鼠标拖拽效果如何实现,拖拽范围限定以及登录窗口自动居中.学会如何制作弹出窗口特效,了解把元素设置为可拖拽的原理. 知识点: 1.掌握对可拖拽对话框的实现原理 2.了解元素如何触发脚本方法以及如何编写侦听事件 3. 学会设置元素在页面中居中和全屏 注意区别: 1.screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. 2.clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照
-
js实现登录拖拽窗口
本文实例为大家分享了js实现登录拖拽窗口的具体代码,供大家参考,具体内容如下 做这个案例的两个关键点: 1.用js将盒子在可视区域居中显示 本可以用css将盒子用定位的方式居中显示,但是采用js的方法更好些. 方法: 盒子的left值 = (可视区域的宽度 - 盒子自身的宽度)/ 2; 盒子的top值 = (可视区域的高度 - 盒子自身的高度)/ 2; 这样盒子就居中显示 2.先鼠标按下,然后鼠标在整个文档上移动时,盒子的位置跟着鼠标移动 这一点上要注意的点: 1)鼠标按下时,鼠标相对盒子X方向
-
原生JS实现可拖拽登录框
本文分享一个用原生JS实现的可拖拽登录框,效果如下: 实现的代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现可拖拽登录框</title> <style type="text/css"
-
JavaScript简单实现弹出拖拽窗口（一）
本文实例为大家分享JavaScript弹出拖拽窗口的具体实现代码,供大家参考,具体内容如下 需求说明: 1.点击页面按钮,弹出窗口: 2.要有半透明背景遮罩: 3.弹出窗口圆角,窗口半透明,但内容不透明:带阴影: 4.窗口可拖动: 5.拖动停止之后,滚动页面时窗口位置不动: 6.可以使用jQuery: 7.有关闭按钮: 进一步功能具体描述: 点按钮,会有一个可以拖拽的浮层出来. 有一个背景遮罩,支持标题栏的拖拽,在标题栏以外,在标题栏区域之外的区域拖拽是没有效果的,拖拽功能限
-
JavaScript简单实现弹出拖拽窗口（二）
接上文JavaScript简单实现弹出拖拽窗口(一)进行学习. 下面开始具体分析代码部分: 首先我们先确认下结构: 悬浮窗口:初始不可见.包括标题栏和内容栏,标题栏内有标题和关闭按钮. 遮罩层:初始不可见.用于设置弹出悬浮窗口时的半透明背景, 按钮:用于点击弹出悬浮窗口. 下面进行详细解释 1.要让窗口能自由移动,那么窗口的定位(position)应该采用绝对定位(absolute): /*登录浮层组件*/ .popup{ display:none; /*初始隐藏*/ widt
-
js实现简易拖拽的示例
简易拖拽 目录 代码实例 代码解析 scrollWidth,clientWidth,offsetWidth的区别 offsetX,clientX,pageX的辨析 下载源码链接 代码实例 <div id="box" style="background: #334;width: 100px;height: 100px;position: absolute;cursor: move;"></div> (function () { var drag
-
纯JS实现可拖拽表单的简单实例
因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mousedown判断鼠标点击的位置是否在触发控件的位置,如果是,mousemove的时候clone一个控件,修改透明度,然后放入容器内的时候remove这个控件,并且在容器内生成一个放入的控件(放入的控件和触发的控件可以不一样) 拖拽:同样的, mousedown的时候判断是哪个控件,mousemove的时候需要放一个占位div放在原有的位置上,并将元素修改透明度然
-
Dropzone.js实现文件拖拽上传功能(附源码下载)
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 效果演示 源码下载 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone"&
-
js实现鼠标拖拽多选功能示例
最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo: 遮罩出现: 被遮罩盖住的,即为选中的块(背景色为粉色) 下面是具体代码,注释已在文中,与大家交流. <!DOCTYPE html> <html> <head> <title>鼠标拖拽多选功能</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"&
-
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
本文实例讲述了jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法.分享给大家供大家参考.具体如下: 左右拖拽切换对比图片效果,运行效果后,图片中间有个拖动条,拖动左右滑动,可看到图片不一样的效果,女模特的脸变嫩了,呵呵,其实是用了两张背景图片实现的,这就需要jquery.beforeafter.js插件了,拖动时候的小图标不见了,路径可以在jquery.beforeafter.js中设置,不多说了. 运行效果截图如下: 在线演示地址如下: http://d
-
JS实现基于拖拽改变物体大小的方法
本文实例讲述了JS实现基于拖拽改变物体大小的方法.分享给大家供大家参考,具体如下: 拖拽改变物体大小功能:拖拽黄色小div来改变绿色大div的宽和高 主要实现由三大步: 1. 通过id获取到大小两个div 2. 给小div添加onmousedown事件 3. 在onmousedown事件给document添加onmousemove和onmouseup事件 由分析图可知,我们只需要在拖拽的时候,获取到物体不断增加的宽度值,问题就解决了 <div id="panel"> <