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 ...
随机推荐
- 软件工程大作业——“你帮我助”软件开发v2.0
项目简介 在疫情管控期间,很多物资由于信息不对称,不能达成资源的有效分配,尽管这样的事件已经基本不会在新冠疫情的场景中出现,但是开发出一个物品交换的公开信息平台在任何一个社区中都是有必要的,这是构建完 ...
- HTML笨方法仿写站酷
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- prometheus-监控docker服务器
1. prometheus-监控docker服务器 prometheus-监控docker服务器 cAdvisor(Container Advisor):用于收集正在运行的容器资源使用和性能信息. 项 ...
- 使用Springboot+redis+Vue实现秒杀的一个Demo
目录 1.Redis简介 2.实现代码 3.启动步骤 4.使用ab进行并发测试 5.线程安全 6.总结 7.参考资料 1.Redis简介 Redis是一个开源的key-value存储系统. Redis ...
- [OpenCV实战]8 深度学习目标检测网络YOLOv3的训练
目录 1 数据集 1.1 下载openImages雪人数据[约1.5小时] 1.2 训练集测试集拆分 2 Darknet 2.1 下载并构建Darknet 2.2 修改代码以定期保存模型文件 2.3 ...
- angular+ZORRO中nz-table 大小屏幕自适应、滚动条、点击事件
首先来说屏幕自适应 HTML <div class="container right_table"> <nz-table #basicTable nzBorder ...
- 创建型模式 - 原型模式Prototype
孩子生来没娘的NT审核机制,又开始说我涉及到广告了,我涉及到什么广告了?我接着发. 学习而来,代码是自己敲的.也有些自己的理解在里边,有问题希望大家指出. 所属:创建型模式 原型模式 一般会和 工场 ...
- OpenMP For Construct dynamic 调度方式实现原理和源码分析
OpenMP For Construct dynamic 调度方式实现原理和源码分析 前言 在本篇文章当中主要给大家介绍 OpenMp for construct 的实现原理,以及与他相关的动态库函数 ...
- Android IO 框架 Okio 的实现原理，到底哪里 OK？
本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 前言 大家好,我是小彭. 今天,我们来讨论一个 Square 开源的 I/O 框架 Okio,我们最开始接触 ...
- 使用Addressables.LoadAssetAsync<Asset>(target)加载unity资源，不止是gameobject
要声明的方法: public static async Task<string> ReadJsonData(string target){ TextAsset jsonDataObjec ...