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 。
表单跟随鼠标的原理：在鼠标按下时根据鼠标和表单在页面的坐标得到它在表单的坐标（拖拽过程这个位置是不变的）。在鼠标移动过程根据鼠标在页面的动态坐标和它在表单的坐标即可获得表单在页面的动态坐标。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
以前最短的IE判定借助于IE不支持垂直制表符的特性搞出来的。2010-05-05
Js实现网页上的MD5加密功能，将文字转换为MD5字符，本代码调用简单，你可以新建一个网页，将此网页上传到你的服务器上，用户浏览网页，就可实现MD5加密转换功能，用户可方便查询任一字符的MD5码，很不错的功能2013-03-03
在实际项目中，进度条的用处还是非常大的。这篇文章主要是要介绍几种制作进度条的方法。通过学习，你也能制作属于自己的进度条了。2009-05-05
这篇文章主要介绍了JS双击变input框批量修改内容的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-12-12
原生js jquery ajax请求以及jsonp的调用方法
下面小编就为大家带来一篇原生js jquery ajax请求以及jsonp的调用方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
下面小编就为大家带来一篇js将json格式的对象拼接成复杂的url参数方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要为大家介绍了Js 根据文件夹目录获取Json数据输出示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要为大家介绍了unicloud云开发进阶获取首页列表数据示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要为大家详细介绍了JavaScript实现搜索的数据显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
HTML+CSS+JavaScript创建一个简单的井字游戏
使用javascript创建游戏是最有趣的学习方式。它会让你保持动力，这对于学习 Web 开发等复杂技能至关重要。本文将使用HTML、CSS和 Javascript创建一个井字游戏。感兴趣的童鞋可以关注一下2021-11-11
最新评论