×目录[1]原理简介 [2]范围圈定 [3]大小改变[4]代码优化前面的话 拖拽可以让元素移动，也可以改变元素大小。本文将详细介绍拖拽改变元素大小的效果实现 原理简介 拖拽让元素移动，是改变定位元素的left和top值实现的。而拖拽改变元素大小，则还需 ...
×
目录
[1]原理简介 [2]范围圈定 [3]大小改变[4]代码
优化 <div id="test" style="height: 100px;width: 100px;background-color: pink;">测试文字</div><script>test.onmousemove = function(e){ e = e || event; //元素边界确定 var L0 = this.offsetLeft; var R0 = this.offsetLeft + this.offsetWidth; var T0 = this.offsetTop; var B0 = this.offsetTop + this.offsetHeight; //范围边界确定 var L = L0 + 10; var R = R0 - 10; var T = T0 + 10; var B = B0 - 10; //范围确定 var areaL = e.clientX < L; var areaR = e.clientX > R; var areaT = e.clientY < T; var areaB = e.clientY > B; //左侧范围 if(areaL){ this.style.cursor = 'w-resize'; } //右侧范围 if(areaR){ this.style.cursor = 'e-resize'; } //上侧范围 if(areaT){ this.style.cursor = 'n-resize'; } //下侧范围 if(areaB){ this.style.cursor = 's-resize'; } //左上范围 if(areaL && areaT){ this.style.cursor = 'nw-resize'; } //右上范围 if(areaR && areaT){ this.style.cursor = 'ne-resize'; } //左下范围 if(areaL && areaB){ this.style.cursor = 'sw-resize'; } //右下范围 if(areaR && areaB){ this.style.cursor = 'se-resize'; } //中间范围 if(!areaL && !areaR && !areaT && !areaB){ this.style.cursor = 'default'; }}</script>
原标题：javascript动画系列第四篇——拖拽改变元素大小
关键词：JavaScript
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
