WEB开发网
开发学院网页设计JavaScript JavaScript 拖拉缩放效果 阅读

JavaScript 拖拉缩放效果

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

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

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

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

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

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

效果预览

JavaScript 拖拉缩放效果

程序说明

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

【程序原理】

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

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

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

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

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

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

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

1 2 3 4 5 6  下一页

Tags:JavaScript 拖拉 缩放

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接