对JavaScript 放大镜来说, 计算倍率必不可少. 一个完整的放大镜结构里, 与倍率扯上关系的一共有 4 个对象, 原图, 缩略图, 镜片和视窗. 镜片在缩略图上的覆盖位置, 其实就是视窗对原图的部分展示, 所以它们之间有如下关系. 倍率 = 原图/缩略图 = 视窗/镜片 倍率一般大于等于 1, 因为原图一般都不会小于缩略图. 一旦倍率小于 1, 则将倍率设为 1. 因为缩略图和原图的尺寸是不可变的, 所以我们通过它们来获得倍率. 复制代码 代码如下: /** * 获取放大镜放大倍数 * @param thumb 缩略图对象 * @param glass 镜片对象 * @return 放大镜放大倍数 */ function getMultiple(thumb, glass) { var multiple = { horizontal:0, vertical:0 }; var thumbSize = getSize(thumb); var imageSize = getImageSize(image); multiple.horizontal = imageSize.width / thumbSize.width; if(multiple.horizontal <= 1) { multiple.horizontal = 1; } multiple.vertical = imageSize.height / thumbSize.height; if(multiple.vertical <= 1) { multiple.vertical = 1; } return multiple; } 原图和缩略图是固定的. 而为了统一视觉感官和防止破页, 我们一般也会指定视窗的尺寸, 所以镜片的尺寸是根据其他几个对象计算出来的. 镜片 = 缩略图x视窗/原图 = 缩略图/倍率 复制代码 代码如下: /** * 加载镜片的样式 * @param viewportSize 视窗尺寸 * @param multiple 倍率 * @param glass 镜片对象 */ function loadGlassStyle(viewportSize, multiple, glass) { glass.style.width = round(viewportSize.width / multiple.horizontal) + 'px'; glass.style.height = round(viewportSize.height / multiple.vertical) + 'px'; } 如果定义的视窗的宽或高比原图还要小, 那该如何显示?需要改变视窗的尺寸. 假设原图是 240x180, 视窗原定尺寸是 200x200. 视窗尺寸随之改变为 200x180. 此时镜片的尺寸仍须与视窗成正比. 如果倍率小于 1, 又该如何显示?将倍率设为 1, 镜片覆盖整个缩略图, 显示整个原图为视窗内容; 或者不作操作 (禁止放大镜效果). 下面的代码用于获取视窗的尺寸. 复制代码 代码如下: /** * 返回视窗尺寸 * @param multiple 倍率 * @param image 原图对象 * @return 视窗尺寸 */ getViewportSize: function(multiple, image) { var dimension = { width:0, height:0 }; // 如果倍率小于 1 或者视窗比原图还宽, 宽度设为跟原图一致, 否则去设定宽度 if(multiple.horizontal <= 1 || config.viewportSize[0] > image.width) { dimension.width = image.width; } else { dimension.width = config.viewportSize[0]; } // 如果倍率小于 1 或者视窗比原图还高, 高度设为跟原图一致, 否则去设定高度 if(multiple.vertical <= 1 || config.viewportSize[1] > image.height) { dimension.height = image.height; } else { dimension.height = config.viewportSize[1]; } return dimension; } 上节《JavaScript 放大镜- 移动镜片》我们实现了镜片在缩略图上的移动效果, 并留下习题:"当镜片带边框时, 如何保证边框不影响镜片移动时的精确度?" 为了防止镜片受边框影响偏移, 可以通过为镜片对象设定与边框宽度一样的负 margin 值来消除偏移. 本节没有 DEMO, 但对后面几讲来说十分重要, 请同学们搞清楚正常和异常情况下的比例换算. 同样留个课后思考题, 本文的代码中出现了 round 方法, 这是一个四舍五入取整方法, 如果要你自己实现这个功能, 你会如何处理? (提示: 可参考计算机图形学关于线条走样的处理方法)

　　推荐阅读

　　五个jQuery图片画廊插件 推荐

1、Pikachoose – lightweight Jquery Image Gallery plugin 查看Demo 效果还算不错，当然跟以前推荐的几个画廊插件还是有一些差距。 推荐指数：★★★ 2、Sliding Boxes and Captions with jQuery 查看Demo 此>>>详细阅读

本文标题：JavaScript 放大镜 放大倍率和视窗尺寸

地址：http://www.17bianji.com/kaifa2/JS/24592.html

 1/2    1