<!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;
}
.box1 {
cursor: pointer;
text-align: center;
margin: auto;
height: 50px;
line-height: 50px;
width: 250px;
background: #CCCC00;
}
.box2 {
position: absolute;
display: none;
width: 500px;
height: 250px;
background: white;
}
.box3 {
position: relative;
color: white;
text-align: center;
height: 50px;
line-height: 50px;
width: 100%;
background: #9ACD32;
}
a {
text-decoration: none;
position: absolute;
right: -15px;
top: -15px;
border-radius: 50%;
text-align: center;
list-style: none;
font-size: 12px;
width: 40px;
height: 40px;
line-height: 40px;
background: white;
}
</style>
</head>
<body>
<div class="box1">点击弹出登录框</div>
<div class="box2">
<div class="box3">
<a href="#">关闭</a>
<h2>欢 迎 登 录</h2>
</div>
</div>
<script>
// 点击“关闭”让登录框隐藏
var a = document.querySelector('a');
var box2 = document.querySelector('.box2');
var box3 = document.querySelector('.box3');
a.onclick = function () {
box2.style.display = 'none';
}
// 点击“弹出”让body颜色恢复,登录框弹出
var box1 = document.querySelector('.box1');
var body = document.querySelector('body');
box1.onclick = function () {
body.style.backgroundColor = '#CCCCCC';
box2.style.display = 'block';
}
// 拖拽登录框
box2.addEventListener('mousedown', function (e) {
// 获取鼠标在盒子里的坐标
var boxX = e.pageX - this.offsetLeft;
var boxY = e.pageY - this.offsetTop;
// 获取盒子的实际宽高
var boxW = box2.offsetWidth;
var boxH = box2.offsetHeight;
//获取可视区域的宽高
var windowW = window.innerWidth;
var windowH = window.innerHeight;
document.addEventListener('mousemove', move)
function move(e) {
var x = e.pageX - boxX;
var y = e.pageY - boxY;
// if判断
if (x <= 0) {
x = 0;
} else if (x >= (windowW - boxW - 15)) {
x = windowW - boxW - 15;
}
if (y <= 0) {
y = 0;
} else if (y >= (windowH - boxH - 15)) {
y = windowH - boxH - 15;
}
box2.style.left = x + 'px';
box2.style.top = y + 'px';
}
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', move);
})
})
</script>
<!-- js笔记 -->
<!-- <script>
// 获取盒子的实际宽高
var boxW = box2.offsetWidth;
var boxH = box2.offsetHeight;
//获取可视区域的宽高
var windowW = window.innerWidth;
var windowH = window.innerHeight;
</script> -->
</body>
</html>
在页面拖动登录框
该代码示例展示了如何使用CSS和JavaScript创建一个可点击弹出并能被拖动的登录框。当用户点击‘点击弹出登录框’时,登录框显示,背景色改变;点击‘关闭’按钮则隐藏登录框。此外,登录框还支持鼠标按下后的拖动操作,限制其在可视区域内移动。
摘要由CSDN通过智能技术生成