js实现模态框拖拽
更新时间：2022年07月05日 08:17:21 作者：TKOP_
这篇文章主要为大家详细介绍了js实现模态框拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现模态框拖拽的具体代码，供大家参考，具体内容如下
效果展示和需求分析
效果展示
需求分析
- 点击登录后登录表单和遮罩层显示，点击关闭按钮隐藏。
- 输入密码时可以明文查看或者隐藏。
- 在表单的头部按下鼠标后可以拖拽表单。
- 鼠标弹起拖拽结束。
代码分析
HTML 代码
<body> <a href="javascript:;" class="login">登录我的账号</a> <form action=""> <h4>账号登录</h4> <div class="login-items"> <label for="uname">用户名：</label > <input type="text" placeholder="请输入用户名" id="uname"> </div> <div class="login-items"> <label for="psw">登录密码：</label> <input type="password" name="" id="psw" placeholder="请输入您的密码"> <span class="close" id="eye-state"></span> </div> <a href="javascript:;" class="login-btn">登录账号</a > <a href="javascript:;" class="close-btn">关闭</a > </form> <div id="bg" class="login-bg"></div> </body> <script src="js/模态框.js"></script>
js 代码
var eyeState = document.querySelector('#eye-state');
var pswInput = document.querySelector('#psw');
var login = document.querySelector('.login');
var loginBg = document.querySelector('#bg');
var loginForm = document.querySelector('form');
var closeBtn = document.querySelector('.close-btn');
var eyeFlag = 0;
eyeState.onclick = setEye;
login.onclick = goLogin;
closeBtn.onclick = leaveLogin;
loginForm.children[0].addEventListener('mousedown', dragForm);
// 表单内容不可选，不然看着不舒服
loginForm.onselectstart = function(e) {
e.preventDefault();
}
// 1、实现小眼睛改变密码输入状态
function setEye() {
if (!eyeFlag) {
eyeState.className = 'open';
pswInput.type = 'text';
eyeFlag = 1;
} else {
eyeState.className = 'close';
pswInput.type = 'password';
eyeFlag = 0;
}
}
// 2、外面登录按钮实现表单、遮罩层的显示和它自己隐藏
function goLogin() {
loginBg.style.visibility = 'visible';
loginForm.style.display = 'block';
this.style.display = 'none';
}
// 3、关闭按钮实现表单、遮罩层的隐藏和外面登录按钮的显示
function leaveLogin() {
loginBg.style.visibility = 'hidden';
loginForm.style.display = 'none';
login.style.display = 'block';
}
// 4、实现表单拖拽效果
function dragForm(e) {
// 当鼠标在表单的标题按下时获取它在表单元素内的坐标并绑定移动事件
var x = e.pageX - this.parentNode.offsetLeft;
var y = e.pageY - this.parentNode.offsetTop;
document.addEventListener('mousemove', move);
// 鼠标弹起移除移动事件
this.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move)
});
function move(event) {
loginForm.style.left = event.pageX - x + 'px';
loginForm.style.top = event.pageY - y + 'px';
}
}分析
- 密码输入框，在点击后面的眼睛即 span 元素时通过 eyeFlag 变量来判断设置表单的 type 属性和 span 的类名（该用哪个小眼睛图）。
- 鼠标是在表单标题区域按下后才有拖拽效果所以给标题绑定 mousedown 事件。
- mousemove 和 mouseup 事件在鼠标按下后分别绑定给 document 和 this(标题)。
在实现拖拽时将 mousemove 事件绑定给标题的话会出现 bug 。快速拖拽时鼠标会离开标题导致表单没有跟上。所以要将这个事件绑定给 document 。
表单跟随鼠标的原理：在鼠标按下时根据鼠标和表单在页面的坐标得到它在表单的坐标（拖拽过程这个位置是不变的）。在鼠标移动过程根据鼠标在页面的动态坐标和它在表单的坐标即可获得表单在页面的动态坐标。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Html5规范中规定自定义属性需要添加前缀data-,目的是提供与渲染无关的信息,读取的时候是通过dataset对象，使用”.”来获取属性，需要去掉data-前缀2023-06-06
这篇文章主要为大家详细介绍了微信小程序云开发实现云数据库读写权限，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要介绍了JS实现六位字符密码输入器功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
这篇文章主要介绍了PHP实现的各种中文编码转换类分享,本文类库支持简体中文、繁体中文、GB2312、BIG5、UTF-8等多种格式之间的转换,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了详解Webpack如何引入CDN链接来优化编译后的体积，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
这篇文章主要介绍了JS弹出窗口插件zDialog简单用法,结合简单实例形式分析了zDialog插件弹出窗口的基本使用方法与参数含义,需要的朋友可以参考下2016-06-06
下面小编就为大家带来一篇实现两个文本框同时输入的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了TypeScript3.7中值得注意的3个新特性，对TS感兴趣的同学，可以参考下2021-05-05
这篇文章主要介绍了如何用JavaScript让你的浏览器说话，对语音感兴趣的同学，可以实验一下2021-04-04
这篇文章主要介绍了js get和post实现代码解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
最新评论