js 元素大小缩放实例
元素大小缩放是一套连贯事件，按下鼠标不放，拖动鼠标 然后松开。
按下鼠标事件
当按下鼠标时，记录元素大小、鼠标按下的位置、状态位。
拖动鼠标事件
当鼠标拖动时，计算元素调用后的大小。
元素调整后大小 = 初始元素大小 + （鼠标移动位置 - 鼠标按下位置）
鼠标松开事件
当调整完成后，鼠标松开这时重置状态位，防止移动鼠标时触发移动事件。
'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
