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 ...
随机推荐
- C#中的进程检测退出事件和座位状态改变事件深入浅出谈谈EventHandler的使用
关于进程 之前我在启动我的师生对讲的exe的时候,都是直接调用Process类的静态函数Process.Start(System.String AppPath,System.String Argume ...
- MYSQL的回忆录（适合有基础的小伙伴看，没基础的看着估计够呛）
SQL分类 MYSQL的数据类型 Text 类型 数据类型 描述 CHAR(size) 保存固定长度的字符串(可包含字母.数字以及特殊字符).在括号中指定字符串的长度.最多 255 个字符. VARC ...
- 贪心算法Dijkstra
Dijkstra 最短路径问题 : 给定一个带权有向图 G = (V, E, W),同时给定一个源点 u (u ∈ V),我们要找出从源点 u 出发到其它各点的最短路径距离,并得出这些最短路径的具体路 ...
- Netty-架构设计及入门程序-3
一.原生 NIO 存在的问题 1.NIO 的类库和 API 繁杂,使用麻烦:需要熟练掌握 Selector.ServerSocketChannel.SocketChannel.ByteBuffer等. ...
- Codeforces Round #844 (Div. 1 + Div. 2, based on VK Cup 2022 - Elimination Round) A-D
比赛链接 A 题意 设计一条线路要贴着6个墙面走,从 \((a,b)\) 到 \((f,g)\) ,线路长度最短. 题解 知识点:模拟. 分类取最短即可. 时间复杂度 \(O(1)\) 空间复杂度 \ ...
- C++Day09 深拷贝、写时复制(cow)、短字符串优化
一.std::string 的底层实现 1.深拷贝 1 class String{ 2 public: 3 String(const String &rhs):m_pstr(new char[ ...
- linux命令与公私钥
昨日内容回顾 etc目录 配置相关 /etc/profile 环境变量文件 /etc/motd 开机欢迎界面 usr目录 程序相关 四种安装软件的方式 1.yum安装 自动解决依赖性问题 2.rap安 ...
- for循环-while循环
for循环 循环语句1--for for循环语句格式: for(初始化表达式①; 布尔表达式②; 步进表达式④){ 循环体③ } 执行流程 执行顺序:①②③④>②③④>②③④-②不满足为止 ...
- chatGPT 桌面版安装教程
概述 标题党了,首先声明 ChatGPT 官方没有桌面版,目前市面上很多的桌面应用也在是浏览器上包了一层,而且大多做的比较粗糙,不太好用,所以都不太推荐. 作为一名骨灰级的程序员,ChatGPT 的重 ...
- 剑指Offer 05. 替换空格（java解题）
目录 1. 题目 2. 解题思路(通用 3. 数据类型功能函数总结 4. java代码 1. 题目 请实现一个函数,把字符串 s 中的每个空格替换成%20. 示例 1: 输入:s = "We ...