放大镜 - 放大倍率和视窗尺寸

秋子淡无痕

1. /**
   
2. * 获取放大镜放大倍数
   
3. * @param thumb                缩略图对象
   
4. * @param glass                镜片对象
   
5. * @return                         放大镜放大倍数
   
6. */
   
7. function getMultiple(thumb, glass) {
   
8.         var multiple = {
   
9.                 horizontal:0,
   
10.                 vertical:0
    
11.         };
    
12. 
    
13.         var thumbSize = getSize(thumb);
    
14.         var imageSize = getImageSize(image);
    
15. 
    
16.         multiple.horizontal = imageSize.width / thumbSize.width;
    
17.         if(multiple.horizontal <= 1) {
    
18.                 multiple.horizontal = 1;
    
19.         }
    
20. 
    
21.         multiple.vertical = imageSize.height / thumbSize.height;
    
22.         if(multiple.vertical <= 1) {
    
23.                 multiple.vertical = 1;
    
24.         }
    
25. 
    
26.         return multiple;
    
27. }

复制代码

原图和缩略图是固定的. 而为了统一视觉感官和防止破页, 我们一般也会指定视窗的尺寸, 所以镜片的尺寸是根据其他几个对象计算出来的.
镜片 = 缩略图x视窗/原图 = 缩略图/倍率

1. /**
   
2. * 加载镜片的样式
   
3. * @param viewportSize        视窗尺寸
   
4. * @param multiple                倍率
   
5. * @param glass                        镜片对象
   
6. */
   
7. function loadGlassStyle(viewportSize, multiple, glass) {
   
8.         glass.style.width = round(viewportSize.width / multiple.horizontal) + 'px';
   
9.         glass.style.height = round(viewportSize.height / multiple.vertical) + 'px';
   
10. }

复制代码

如果定义的视窗的宽或高比原图还要小, 那该如何显示?
需要改变视窗的尺寸. 假设原图是 240x180, 视窗原定尺寸是 200x200. 视窗尺寸随之改变为 200x180. 此时镜片的尺寸仍须与视窗成正比.

javaScript,magnifier,multiple,viewport,glass,thumb

如果倍率小于 1, 又该如何显示?
将倍率设为 1, 镜片覆盖整个缩略图, 显示整个原图为视窗内容; 或者不作操作 (禁止放大镜效果).

javaScript,magnifier,multiple,viewport,glass,thumb

下面的代码用于获取视窗的尺寸.

1. 
   
2. /**
   
3. * 返回视窗尺寸
   
4. * @param multiple                倍率
   
5. * @param image                        原图对象
   
6. * @return                                视窗尺寸
   
7. */
   
8. getViewportSize: function(multiple, image) {
   
9.         var dimension = {
   
10.                 width:0,
    
11.                 height:0
    
12.         };
    
13. 
    
14.         // 如果倍率小于 1 或者视窗比原图还宽, 宽度设为跟原图一致, 否则去设定宽度
    
15.         if(multiple.horizontal <= 1 || config.viewportSize[0] > image.width) {
    
16.                 dimension.width = image.width;
    
17.         } else {
    
18.                 dimension.width = config.viewportSize[0];
    
19.         }
    
20. 
    
21.         // 如果倍率小于 1 或者视窗比原图还高, 高度设为跟原图一致, 否则去设定高度
    
22.         if(multiple.vertical <= 1 || config.viewportSize[1] > image.height) {
    
23.                 dimension.height = image.height;
    
24.         } else {
    
25.                 dimension.height = config.viewportSize[1];
    
26.         }
    
27. 
    
28.         return dimension;
    
29. }

复制代码

原文：http://www.neoease.com/javascrip ... -and-viewport-size/