拖动窗口

最新推荐文章于 2024-07-05 22:51:41 发布

素心如月桠

最新推荐文章于 2024-07-05 22:51:41 发布

阅读量95

点赞数

本文链接：https://blog.csdn.net/m0_47010003/article/details/116937612

版权

html 同时被 3 个专栏收录

43 篇文章 13 订阅

订阅专栏

vscode

35 篇文章 2 订阅

订阅专栏

JavaScript

34 篇文章 3 订阅

订阅专栏

在这里插入图片描述

<!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 type="text/css">
			.login {
				display: none;
				width: 512px;
				height: 280px;
				position: fixed;
				border: white solid 1px;
				left: 30%;
				top: 20%;
				background-color: white;
				box-shadow: 0px 0px 20px white;
				z-index: 9999;
				transform: translate(-50% -50%);
			}
			
			.login-bg {
				display: none;
				width: 100%;
				height: 100%;
				position: fixed;
				top: 0px;
				left: 0px;
				background-color: rgba(176, 179, 176, 0.8)
			}
			
			.login-button {
				width: 70px;
				margin: 30px auto 0px auto;
				line-height: 40px;
				font-size: 14px;
				border: darkgrey 1px solid;
				text-align: center;
			}
			
			.login-input-content {
				margin-top: 20px;
			}
			
			.login-title {
				width: 100%;
				margin: 10px 0px 0px 0px;
				text-align: center;
				line-height: 40px;
				height: 40px;
				font-size: 18px;
				position: relative;
				cursor: move;
			}
			
			.login-title span {
				position: absolute;
				font-size: 12;
				right: -20px;
				top: -30px;
				/*background: url() repeat scroll top left;*/
				background-color: white;
				border: white solid 1px;
				width: 40px;
				hight: 40px;
				border-radius: 20px;
			}
			
			.login-input {
				overflow: hidden;
				margin: 0px 0px 20px 0px;
			}
			
			.login-input label {
				float: left;
				width: 90px;
				padding-right: 10px;
				text-align: right;
				line-height: 35px;
				height: 35px;
				font-size: 14px;
			}
			
			.login-button a {
				display: block;
			}
			
			a {
				text-decoration: none;
				color: black;
			}
		</style>
	</head>

	<body>
		<div class="login-header">
			<a href="javascript:;" id="link">点击，弹出登录框</a>
		</div>
		<div class="login" id="login">
			<div class="login-title" id="title">登录会员
				<span><a href="javascript:void(0)" class="close-login" id="closeBtn">关闭</a></span>
			</div>
			<div class="login-input-content">
				<div class="login-input">
					<label>用户名：</label>
					<input type="text" id="password" placeholder="请输入用户名" class="login-input-username" />

				</div>
				<div class="login-input">
					<label>密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
					<input type="text" id="username" placeholder="请输入密码" class="login-input-username" />

				</div>
				<div class="login-button" id="loginBtn">
					<a href="javascript:void(0)" id="login-button-submit">登录账户</a>
				</div>
			</div>
		</div>
		<div class="login-bg" id="bg">

		</div>
		<script type="text/javascript">
			var link = document.querySelector('#link');
			var login = document.querySelector('#login');
			var bgr = document.querySelector('.login-bg');
			var Btn = document.querySelector('#closeBtn');
			var title = document.querySelector('.login-title');
			link.addEventListener('click', function() {
				login.style.display = 'block';
				bgr.style.display = 'block';

			})
			Btn.addEventListener('click', function() {
				login.style.display = 'none';
				bgr.style.display = 'none';

			})
			title.addEventListener('mousedown', function(e) {
				var x = e.pageX - login.offsetLeft;
				var 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);
				})
			})
		</script>
	</body>

</html>

素心如月桠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
拖动窗口

<!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.
复制链接

扫一扫