js实现窗口拖拽最大最小化
2021-02-11 22:19
阅读：656
YPE >
标签：ack class add ini 最小化 port back position tor
html>
* {
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;
}
窗口
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
l = 0;
}
if (l > maxl) {
l = maxl;
}
if (t
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;
}
}
js实现窗口拖拽最大最小化
标签：ack class add ini 最小化 port back position tor
原文地址：https://www.cnblogs.com/bwnnxxx123/p/13036481.html
评论
亲，登录后才可以留言！