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 ...
随机推荐
- Docker进阶-Dockerfile建立一个自定义的镜像执行自定义进程
前言 docker对我来说是一个很方便的工具,,上一篇文章也写了docker基本的一些使用,这篇文章重点描述一下Dockerfile的使用,从零建立一个自己定制化的镜像,并可以执行我们需要的任务. 作 ...
- Mqttnet内存与性能改进录
1 MQTTnet介绍 MQTTnet是一个高性能的 .NET MQTT库,它提供MQTT客户端和MQTT服务器的功能,支持到最新MQTT5协议版本,支持.Net Framework4.5.2版本或以 ...
- 说透 Kubernetes 监控系列 - 概述
本文作者孔飞,来自快猫星云团队,Kubernetes专家,Categraf 采集器核心研发工程师 云原生包含了开源软件.云计算和应用架构的元素.云计算解决开源软件的运行门槛问题,同时降低了运维成本和基 ...
- SQL 之 SELECT语句
1.展示所有列语法 select * from table; #table表示表名 示例: select * from a 2.展示指定列语法 select column1, column2, ... ...
- (admin.E108) The value of 'list_display[0]' refers to 'productname', which is not a callable, an attribute of 'ProductAdmin', or an attribute or method on 'product.Product'.
models.py # 创建产品表 class Product(models.Model): productName = models.CharField('产品名称', max_length=64) ...
- vite+ts+vue3+router4+Pinia+ElmPlus+axios+mock项目基本配置
1.vite+TS+Vue3 npm create vite Project name:... yourProjectName Select a framework:>>Vue Selec ...
- 【运维笔录】局域网实现HTTPS访问，只需Nginx + mkcert
1)下载安装mkcert wget -O mkcert https://github.com/FiloSottile/mkcert/releases/download/v1.4.3/mkcert-v1 ...
- [OpenCV实战]28 基于OpenCV的GUI库cvui
目录 1 cvui的使用 1.1 如何在您的应用程序中添加cvui 1.2 基本的"hello world"应用程序 2 更高级的应用 3 代码 4 参考 有很多很棒的GUI库,例 ...
- python之路46 django request对象 form表单 pycharm连接数据库 ORM简介
静态文件配置 1.编写一个用户登录页面 2.静态文件 不怎么经常变化的文件 主要针对html文件所使用的到的各种资源 css文件.js文件.img文件.第三方框架文件 django针对静态文件资源需要 ...
- python进阶之路2——解释器软件安装
内容概要 计算机五大组成部分 计算机三大核心硬件 操作系统 编程与编程语言 编程语言发展史 编程语言的分类 python解释器下载与安装 python解释器多版本共存 pycharm安装 计算机五大组 ...