最近写了一个原生JavaScript实现矩形块大小任意缩放的案例,感觉里面的东西比较的绕,,里分享源码给大家,一起学习一下。
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt; title>原生JavaScript实现矩形块大小任意缩放& lt;/title>
& lt;/head>
& lt; style>
* {
保证金:0;
填充:0;
}
.box {
位置:相对;
前:200像素;
左:500 px;
宽度:500 px;
身高:300 px;
background - color: blueviolet;
}
.box> div: nth-child (- n + 4) {
位置:绝对的;
宽度:5 px;
身高:5 px;
background - color: # cc00ff;
}
.box> div: nth-child (n + 5) {
位置:绝对的;
background - color: # f30497;
}
.box>。dot1 {
光标:nw-resize;
上图:5 px;
左:5 px;
}
.box>。dot2 {
光标:ne-resize;
上图:5 px;
右:5 px;
}
.box>。dot3 {
光标:se-resize;
底部:5 px;
右:5 px;
}
.box>。dot4 {
光标:sw-resize;
底部:5 px;
左:5 px;
}
.box> .line1,
.box>。line3 {
宽度:500 px;
身高:5 px;
}
.box>。line1 {
上图:5 px;
光标:n-resize;
}
.box>。line3 {
底部:5 px;
光标:s-resize;
}
.box> .line2,
.box>。line4 {
宽度:5 px;
身高:300 px;
}
.box>。么{
右:5 px;
光标:e-resize;
}
.box>。line4 {
左:5 px;
光标:e-resize;
}
& lt;/style>
& lt; body>
& lt; div类="盒子"比;
& lt; div类=" dot1 "祝辞& lt;/div>
& lt; div类=" dot2 "祝辞& lt;/div>
& lt; div类=" dot3 "祝辞& lt;/div>
& lt; div类=" dot4 "祝辞& lt;/div>
& lt; div类=" line1 "祝辞& lt;/div>
& lt; div类=懊础弊４? lt;/div>
& lt; div类=" line3 "祝辞& lt;/div>
& lt; div类=" line4 "祝辞& lt;/div>
& lt;/div>
& lt; script>//获取相关元素节点
让盒子=document.querySelector (“.box”);
让点=document.querySelectorAll (“.box> div: nth-child (n + 4) ");
让线=document.querySelectorAll (“.box> div: nth-child (n + 5) ");//类边框宽度
让bd=5;//循环指定事件对象
函数changeBox([框,点、线、bd]) {
(让我=0;我& lt;4;我+ +){
让{0:dot1, 1: dot2, 2: dot3, 3: dot4}=点;//点对象解构
让{0:line1, 1:么,2:line3, 3: line4}=线;//行对象解构//矩形顶点点击拖动调整大小
点[我]。onmousedown=function (ev) {//点击事件初始化相关值
让老人=ev.clientY;//顶点原本的y值
让oldX=ev.clientX;//顶点原本的x值
让h=box.clientHeight;//盒的高度
让w=box.clientWidth;//框的宽度
让t=box.offsetTop;//箱距离顶部的值
让l=box.offsetLeft;//箱距离左边的左值
窗口。onmousemove=function (e) {
让offsetY=e。clientY——老人;//鼠标移动y轴偏移量
让offsetX=e。clientX - oldX;//鼠标移动x轴偏移量//如果条件是判断鼠标点击的节点目标对象
如果(i==0) {
box.style。身高=" $ {h - offsetY + bd} px”;//箱高度变化
box.style。顶级=' $ {t + offsetY - bd} px”;//箱的顶值变化(定位)
box.style。宽度=" $ {w - offsetX + bd} px”;//框的宽度变化
box.style。左=' $ {l + offsetX - bd} px”;//盒的左值变化(定位)
}如果(i==1) {
box.style。身高=" $ {h - offsetY + bd} px”;
box.style。顶级=' $ {t + offsetY - bd} px”;
box.style。宽度=" $ {w + offsetX + bd} px”;
}如果(我==2){
box.style。身高=" $ {h + offsetY + bd} px”;
box.style。宽度=" $ {w + offsetX + bd} px”;
}如果(我==3){
box.style。身高=" $ {h + offsetY + bd} px”;
box.style。宽度=" $ {w - offsetX + bd} px”;
box.style。左=' $ {l + offsetX - bd} px”;
}//边框线的高度/宽度随着盒子的大小变化而变化
line1.style。宽度=box.style.width;
line2.style。身高=box.style.height;
line3.style。宽度=box.style.width;
line4.style。身高=box.style.height;
}
}//边框点击拖动调整大小
[我]。onmousedown=function (ev) {//点击事件初始化相关值
让老人=ev.clientY;//顶点原本的y值
让oldX=ev.clientX;//顶点原本的x值
让h=box.clientHeight;//盒的高度
让w=box.clientWidth;//框的宽度
让t=box.offsetTop;//箱距离顶部的值
让l=box.offsetLeft;//箱距离左边的左值
窗口。onmousemove=function (e) {
让offsetX=e。clientX - oldX;//鼠标移动x轴偏移量
让offsetY=e。clientY——老人;//鼠标移动y轴偏移量//如果条件是判断鼠标点击的节点目标对象
如果(i==0) {
box.style。身高=" $ {h - offsetY + bd} px”;
box.style。顶级=' $ {t + offsetY - bd} px”;
}如果(i==1) {
box.style。宽度=" $ {w + offsetX + bd} px”;
}如果(我==2){
box.style。身高=" $ {h + offsetY + bd} px”;
其他}{
box.style。宽度=" $ {w - offsetX + bd} px”;
box.style。左=' $ {l + offsetX - bd} px”;
}//边框线的高度/宽度随着盒子的大小变化而变化
line1.style。宽度=box.style.width;
line2.style。身高=box.style.height;
line3.style。宽度=box.style.width;
line4.style。身高=box.style.height;
}
}//鼠标抬起后清除鼠标移动事件
窗口。onmouseup=function () {
窗口。onmousemove=false;
}
}
}
changeBox([框,点、线、bd])
& lt;/script>
& lt;/body>
& lt;/html>
