JavaScript 图片放大镜（可拖放、缩放效果）第2/4页

【缩放程序】

原理也很简单，根据鼠标的坐标来设置缩放对象样式。
除了设置width和height外，对于上边和左边的缩放还要设置left和top，详细可参考代码。

程序更重要的是结构设计，因为有八个方向又分普通和比例缩放，
要尽量抓出能重用的部分，不然程序的复杂度可想而知。
为了提高程序内函数重用度减低复杂度我做了以下设计：
1.设一个_fun程序存放缩放过程中要执行的程序（有点像委托）；
2.计算四个样式初始值，缩放函数修改这些初始值，最后重新设置全部样式（为了减低复杂度不是按需修改）；
3.对于普通缩放只需要四个方向的程序就够，像右下方向可以用执行右边和下边程序代替；
4.根据比例缩放程序和普通缩放程序可重用的部分抽出了四个修正程序（用了部分程序效率来换取）；

下面是程序中比较有用的部分：

【边宽获取】

由于涉及到高度和宽度的修改，边框宽度的获取必不可少。
因为用offset取得的宽度或高度是包括了边框宽度的，style中的宽度和高度是不包括边框宽度的，
所以设置样式的时候必须在offset取得的宽度或高度的基础上减去边框宽度。

那怎么取得边框宽度呢？
直观的方法是通过parseInt(object.style.borderBottomWidth)来获取，但这是错误的，
因为这样只能获取style中设置的样式，而不能获取class中设置的样式。

要取得最终样式（实际的样式），在ie中可使用currentStyle取得，在ff中使用document.defaultView.getComputedStyle(object, null)，
那么用下面的程序就可以获取边框宽度了：

【比例缩放】

比例缩放原理也很简单，在原有缩放的基础上，再按比例设置一次高和宽。
例如右下的比例缩放是先设置一次右边的普通缩放取得宽度，
根据比例取得高度后执行一次下边的修正程序，
由于此时高度经过修正可能已经改变了，最后需要再执行一次右边的修正程序。

这样的缩放是以宽度优先的，对于上下两个点以高度优先会有更好的体验，
例如对于上面的点可以： 

对于上下左右四个点，更好的体验当然是以该点为中心缩放，
各位有兴趣的话可以把这个也做出来，写多四个修正程序对应这几个点就行。

而最小限制，范围限制可参照修正程序中的代码。
程序中也使用了跟拖放差不多的释放选择和鼠标捕获。

【鼠标捕获补充】

setCapture解决了ie中鼠标捕获的问题，但ff下的鼠标捕获还有问题。
当层的内部没有文本内容时，ie捕获正常，但ff在拖放到浏览器外时捕获就会失效，
暂时的解决方法只有插入文本，例如：
resize.innerHTML = "<font size='1px'>&nbsp;</font>";
各位如果有更好解决方案的话记得通知我啊。

最新评论