JavaScript 拖拉缩放效果

核心提示：本文示例源代码或素材下载 拖拉缩放效果，实现通过鼠标拖动来调整层的面积（宽高）大小，JavaScript 拖拉缩放效果，例如选框效果，这里的拖拉缩放比一般的选框复杂一点，先以右边拖拉为例，右边拖拉一般是以左边为固定点，能设置八个方位（方向）的固定触发点，能设置最小范围

本文示例源代码或素材下载

拖拉缩放效果，实现通过鼠标拖动来调整层的面积（宽高）大小。例如选框效果。

这里的拖拉缩放比一般的选框复杂一点，能设置八个方位（方向）的固定触发点，能设置最小范围，最大范围和比例缩放。

跟拖放效果一样，程序的原型也是在做图片切割效果的时候做出来的。但这个效果的参考少的多，基本上靠自己摸索，走了不少弯路，现在总算把自己想要的效果做出来了，程序跟上一个版本比较也已经“面目全非”，还是觉得有很多需要改进的地方，就像永远没有最完美的土耳其地毯。

这里也有一个简化版的SimpleResize，方便学习。

效果预览

程序说明

其中用到的鼠标捕获、清除选择等，在拖放效果中有说明的这里就略过。下面以SimpleResize为例说一下基本原理。

【程序原理】

程序需要用Set来添加触发对象（就是用来拖拉的对象，详细看使用说明），主要是设置mousedown事件来触发Start程序开始缩放。

Start程序主要用来设置缩放程序_fun和缩放需要的参数，最后设置mousemove事件触发Resize程序进行缩放，mouseup事件中执行取消缩放Stop程序。

Resize程序的任务是执行缩放程序_fun和设置整理后的样式，这里为了简化程序样式是全部一起设置的，这样程序的注意流程就完成了。

ps：设置样式的值必须是大于0的数，否则ie会报错。

下面说说缩放的原理，先以右边拖拉为例，右边拖拉一般是以左边为固定点，右边进行缩放。

首先记录左边定位参数_sideLeft：

this._sideLeft = e.clientX - this._styleWidth;