Js 实现登录框可拖动
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
} .app {
width: 100%;
height: 100%;
background-color: lightblue;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
} #main {
width: 300px;
height: 200px;
background-color: white;
z-index: 999;
position: absolute;
} #main:hover {
cursor: move;
}
</style>
</head> <body>
<div class="app">
<div id="main"> </div>
</div>
</body> </html>
<script>
let login = document.querySelector('#main');
login.addEventListener('mousedown', (e) => {
let x = e.pageX - login.offsetLeft
let y = e.pageY - login.offsetTop document.addEventListener('mousemove', move)
function move(e) {
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
//鼠标抬起，销毁鼠标移动事件
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', move);
})
});
console.log(login);
</script>
Js 实现登录框可拖动的更多相关文章
- js 拟写登录页 可以拖动登录框
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 拖动登录框 HTML+CSS+js
先上效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- Discuz! X2.5判断会员登录状态及外部调用注册登录框
Discuz! X2.5判断会员登录状态及外部调用注册登录框 有关discuz论坛会员信息,收集的一些资料: 用dedecms+discuz做了个门户加论坛形式的网站,但是dedecms顶部目前只能q ...
- javascript实例学习之三——类新浪微博的登录框
该登录框和百度的搜索框类似,可以实现如下效果: 1.文字输入时自动弹出提示层 2,提示层根据输入文字进行自动过滤 3,提示层可以使用上下按键进行选择 4,提示层可以点击或者回车来确认输入 微博登录框h ...
- phpmyadmin 4.x 版本无法看到登录框的处理
由于个人dreamhost即将到期问题,购买了一台VPS. 配置了一个CentOS 6.4 Linux 服务器,用Nginx+php-fpm搭建的环境. 这些都是废话,下面是重点: 当搭建后配置php ...
- JQuery+CSS3实现封装弹出登录框效果
原文:JQuery+CSS3实现封装弹出登录框效果 上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个 ...
- 第一百三十三节，JavaScript，封装库--弹出登录框
JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...
- js弹窗登录效果(源码)--web前端
1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- 基于CSS3动态背景登录框代码
基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- 完美解决bootstrap模态框允许拖动后拖出边界的问题
使用bootstrap3版本 在网上看了很多方法,我觉得jquery-ui的实现方法是最简单有效的,具体实现方法 1.下载并引入jquery-ui插件 2.全局添加模态框允许拖动事件 $(docume ...
随机推荐
- SQL审核平台Yearning
1.关于Yearming Yearming是一个Sql审核平台,底层使用Go语言,安装和部署方式也很便捷 项目地址 https://guide.yearning.io/install.html git ...
- 强化学习调参技巧二：DDPG、TD3、SAC算法为例：
1.训练环境如何正确编写 强化学习里的 env.reset() env.step() 就是训练环境.其编写流程如下: 1.1 初始阶段: 先写一个简化版的训练环境.把任务难度降到最低,确保一定能正常训 ...
- 基于.NetCore开发博客项目 StarBlog - (22) 开发博客文章相关接口
前言 本文介绍博客文章相关接口的开发,作为接口开发介绍的第一篇,会写得比较详细,以抛砖引玉,后面的其他接口就粗略带过了,着重于WebApi开发的周边设施. 涉及到的接口:文章CRUD.置顶文章.推荐文 ...
- JVM常用调优参数
目录 JVM内存模型及常用参数 参数解释 垃圾收集器 Serial收集器(-XX:+UseSerialGC -XX:+UseSerialOldGC) Parallel Scavenge收集器(-XX: ...
- MVP、原型、概念验证，傻傻分不清楚？
MVP.原型以及概念验证这三者的概念虽然没有密切的联系,但也有不少人会分不清这三者的区别,在这篇文章中,我们会帮大家区分一下这三个概念.首先是MVP,MVP是Minimum Viable Produc ...
- Visual Studio 2022 MAUI NU1105(NETSDK1005) 处理记录
故障说明 MAUI项目是日常使用的项目,一直都好好的 某一天修改了几行代码后,突然项目无法编译了,提示NU1105错误 从Git重新拉取一份之前的代码编译也是同样的错误,经过半天的查阅,尝试了几种方案 ...
- [OpenCV实战]42 数码单反相机的技术细节
在这篇文章中,我们将说明数码单反相机DSLR(Digital Single Lens Reflex Camera)的各个技术方面.本文将说明焦距(focal length),f-stop,景深(dep ...
- Mac上优秀的虚拟机软件推荐 PD Parallels Desktop 18.1.1
APPERK 软件信息 软件名称 ParallelsDesktop 版本号 18.1.1 软件类型 官网版 + 商业版 安装包大小 390MB 语言 中文 系统支持 macOS11及以上(M芯片原生) ...
- 2023牛客寒假算法基础集训营2 ABCDEFHJKL
比赛链接 A 题解 知识点:数学. 用 \(n\) 减去区间1的端点得到匹配的一个区间,求一下与区间2的交集. 一个小公式,两区间 \([L_1,R_1]\) 和 \([L_2,R_2]\) 的交集长 ...
- angular 父组件调用子组件方法---以及组件跨模块使用方法
如果要在父组件调用子组件 可以这样子 @ViewChild('mySun', { static: false }) mySun: MySunComponent; 使用方法: let res=this. ...