js实现窗口拖拽最大最小化
Posted 被窝暖暖嘻嘻嘻
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现窗口拖拽最大最小化相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 400px;
height: 300px;
background-color: rgb(83, 36, 46);
font-size: 40px;
color: cyan;
line-height: 300px;
text-align: center;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box">窗口</div>
</body>
</html>
<script>
var obox = document.querySelector(".box");
//鼠标按下拖动
obox.onmousedown = function (e) {
var e = e || event;
var offsetX = e.offsetX;
var offsetY = e.offsetY;
document.onmousemove = function (e) {
var e = e || event;
var l = e.pageX - offsetX;
var t = e.pageY - offsetY;
var maxl = window.innerWidth - obox.offsetWidth;
var maxt = window.innerHeight - obox.offsetHeight;
if (l < 0) {
l = 0;
}
if (l > maxl) {
l = maxl;
}
if (t < 0) {
t = 0;
}
if (t > maxt) {
t = maxt;
}
obox.style.left = l + "px";
obox.style.top = t + "px";
}
document.onmouseup = function (e) {
var e = e || event;
document.onmousemove = null;
}
}
// 双击变大变小
var tp = 1;
obox.ondblclick = function () {
if (tp == 1) {
obox.style.width = window.innerWidth + "px";
obox.style.height = window.innerHeight + "px";
tp = 2;
} else {
obox.style.width = 400 + "px";
obox.style.height = 300 + "px";
tp = 1;
}
}
</script>
以上是关于js实现窗口拖拽最大最小化的主要内容，如果未能解决你的问题，请参考以下文章