js 元素大小缩放实例
程序员文章站
2022-04-11 20:13:18
元素大小缩放是一套连贯事件，按下鼠标不放，拖动鼠标 然后松开。 按下鼠标事件 当按下鼠标时，记录元素大小、鼠标按下的位置、状态位。 拖动鼠标事件 当鼠标拖动时，计算元素调用后的大小。 元素调整后大小 = 初始元素大小 + （鼠标移动位置 - 鼠标按下位置） 鼠标松开事件 当调整完成后，鼠标松开这时重 ......
元素大小缩放是一套连贯事件，按下鼠标不放，拖动鼠标 然后松开。
按下鼠标事件
当按下鼠标时，记录元素大小、鼠标按下的位置、状态位。
拖动鼠标事件
当鼠标拖动时，计算元素调用后的大小。
元素调整后大小 = 初始元素大小 + （鼠标移动位置 - 鼠标按下位置）
鼠标松开事件
当调整完成后，鼠标松开这时重置状态位，防止移动鼠标时触发移动事件。
'use strict';
class divelement {
/**
* 构造函数
* @param {object} option
* @param {htmlelement} option.element
* @param {number} option.minwidth
* @param {number} option.minheight
*/
constructor({ element, minwidth, minheight }) {
this.element = element;
this.minheight = minheight;
this.minwidth = minwidth;
this.state = false;
}
/**
* @returns {cssstyledeclaration}
*/
get style() {
return window.getcomputedstyle(this.element);
}
/**
* 调整大小
*/
resizable() {
let nodese = this._createse('resizable-se');
let [mousedownx, mousedowny, width, height] = [0, 0, 0, 0];
// 鼠标按下
nodese.addeventlistener("mousedown", (event) => {
this.state = true; // 设置状态位
[mousedownx, mousedowny, width, height] = [
event.clientx, // 鼠标按下时x坐标
event.clienty, // 鼠标按下时y坐标
number.parsefloat(this.style.width), // 获取元素宽度
number.parsefloat(this.style.height), // 获取 元素高度
];
});
// 鼠标拖动
document.addeventlistener("mousemove", (event) => {
if (this.state) {
let w = width + (event.clientx - mousedownx); // 调整后的宽度
let h = height + (event.clienty - mousedowny); // 调整后的高度
if (w > this.minwidth) { // 限制最小 宽度
this.element.style.width = w + 'px';
}
if (h > this.minheight) { // 限制最小 高度
this.element.style.height = h + 'px';
}
}
})
// 鼠标松开
this.element.addeventlistener("mouseup", (event) => {
this.state = false; // 重置状态位
})
}
_createse(classname) {
let node = document.createelement('div');
node.classname = classname;
this.element.appendchild(node);
return node;
}
}
<!doctype html>
<head>
<meta charset="utf8">
<title>缩放</title>
<script src="divelement.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="resizable">
<h2>右下角</h2>
</div>
<script>
'use strict';
let o = new divelement({
element: document.queryselector('.resizable'),
minwidth: 140,
minheight: 140
});
o.resizable();
</script>
</body>
</html>
.resizable {
border: 1px #ccc solid;
float: left;
height: 200px;
width: 200px;
padding: 40px;
position: relative;
}
.resizable-se {
cursor: se-resize;
width: 12px;
height: 12px;
right: 1px;
bottom: 1px;
background: url("ui-icons.png") no-repeat;
position: absolute;
}
样本：http://js.zhuamimi.cn/%e5%85%83%e7%b4%a0%e5%a4%a7%e5%b0%8f%e8%b0%83%e6%95%b4/
源码：https://pan.baidu.com/s/1f4n0nk6qzfnqokmswf7keg
我的百度经验：https://jingyan.baidu.com/article/1876c85223513b890b1376f5.html
上一篇： 有理有据，令人信服