2022-03-26 原生js实现一个点击弹出的可拖拽登录框(待编辑)

点击，弹出登录框

登录会员关闭

用户名：

登录密码：

登录会员

// 获取元素
var link = document.getElementById(‘link’); //点击的文字
var bg = document.getElementById(‘bg’); //遮盖层
var login = document.getElementById(‘login’); //登录框
var title = document.getElementById(‘title’); //登录框的标题
var closeBtn = document.getElementById(‘closeBtn’);
// 需求:
// 1.点击文字,展示遮盖层和登录框
// 1.1获取元素
// 1.2 给link注册点击事件
link.onclick = function(){
// 1.3 在事件处理函数中,让login和bg展示出来
login.style.display = ‘block’;
bg.style.display = ‘block’;
}

// 2. 鼠标在登录框的头部按下时,可以拖动
// 2.1 给title注册mousedown事件
title.onmousedown = function(e){
// 2.4 获取鼠标在title上按下的坐标
var downX = e.clientX;
var downY = e.clientY;

// 2.6 获取鼠标按下时,login的初始位置
var posX = login.offsetLeft;
var posY = login.offsetTop;

      // 2.2 在mousedown中给document注册mousemove事件document.onmousemove = function(e){//2.3 获取鼠标移动的坐标var x = e.clientX;var y = e.clientY;

// 2.5 计算鼠标移动了多少移动的坐标- 按下的坐标
var instanceX = x - downX;
var instanceY = y - downY;

        //2.7 计算login最终处于的位置   鼠标移动的距离 + login初始的位置var targetX = instanceX + posX;var targetY = instanceY + posY;// 3. 限制登录框的位置

// 3.1 获取最小距离和最大距离
var maxX = window.innerWidth - login.offsetWidth -21; //可视区的宽度 - login的宽度
var maxY = window.innerHeight - login.offsetHeight; //可视区的宽度 - login的宽度
// 3.2 判断target是否小于最小距离或者大于最大距离
if(targetX < 0){
targetX = 0;
}
if(targetY < 21){
targetY = 21;
}

            if(targetX > maxX){targetX = maxX;}if(targetY > maxY){targetY = maxY;}//由于target算出来的就是login应该处于的位置login.style.left = targetX  + 'px';login.style.top = targetY  + 'px';}}//2.8 松手,login不在移动
document.onmouseup = function(){document.onmousemove = null;
}

2022-03-26 原生js实现一个点击弹出的可拖拽登录框(待编辑)相关推荐

纯js封装一个多功能弹出框
不借助其它的css代码和图片资源,可直接调用. 原创内容,请勿转载. 注意,不要直接复制文章里的封装代码,因为编辑器的原因,无论怎么编辑,它还是给修改了代码.文末提供了封装代码的下载地址(无需积分) ...
原生js实现canvas画布中绘制、移动、拖拽、删除矩形（如简易截图工具）
功能描述待图片上传并加载完成后,重新生成画布: 鼠标在画布区域内绘制,移动,拖拽,删除矩形(如截图工具一般): isboundary() 判断是否需要判断边界问题,默认false. 效果截图实现代 ...
js实现弹出窗口的拖拽功能
弹出窗口的拖拽拖拽功能运用到的有 onmousedown 事件,onmousemove 事件以及 onmouseup 事件弹出窗口基本步骤: 1.点击点击弹出窗口按钮弹出窗口: 2.窗口弹出后,鼠 ...
HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
原生JS实现一个简单的打字小游戏
原生JS实现一个简单的打字小游戏利用javascript制作一个简单的打字小游戏之前写了一个贪吃蛇小游戏好像反响不错今天我来写一个比贪吃蛇更low更简单的打字小游戏打字小游戏原理接下来咋们直 ...
原生js完成一个简单的抽奖功能
文章目录前言实现过程 1.前期准备 2.CSS美化 3.使用 js 完成抽奖功能 3.1 随机数模块 3.2 随机奖品 3.3 开始抽奖 3.4 点击开始抽奖完整代码 HTML部分 CSS部分 ...
【原生JS】仿新浪微博名片弹框
[原生JS]仿新浪微博名片弹框博客已经搬家地址:http://cm2009.sinaapp.com/ 第一次用原生JS写小功能,有很多不足的地方,例如事件绑定没有使用事件委托功能,而是直接用零级D ...
js从一个数组中筛选出另一个数组中存在的值
js从一个数组中筛选出另一个数组中存在的值这里从arr中筛选arr1中存在的值,arr2为筛选结果数组 let arr=["1","2","3&qu ...
js常见问题之为什么点击弹出的i总是最后一个
在前端群里看见过很多人问过这个问题,今晚又有人问了这个问题,所以写篇文章整理一下.首先看一下代码,点击li之后弹出当前li所对应的索引值.于是很多人刷刷刷写出了下面的代码. var aLi = doc ...

2022-03-26 原生js实现一个点击弹出的可拖拽登录框(待编辑)

2022-03-26 原生js实现一个点击弹出的可拖拽登录框(待编辑)相关推荐

最新文章

热门文章