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


Posted in Javascript onMay 09, 2011

对JavaScript 放大镜来说, 计算倍率必不可少.
一个完整的放大镜结构里, 与倍率扯上关系的一共有 4 个对象, 原图, 缩略图, 镜片和视窗. 镜片在缩略图上的覆盖位置, 其实就是视窗对原图的部分展示, 所以它们之间有如下关系.
倍率 = 原图/缩略图 = 视窗/镜片

JavaScript 放大镜 放大倍率和视窗尺寸
倍率一般大于等于 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. 此时镜片的尺寸仍须与视窗成正比.

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

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

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

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

/** 
* 返回视窗尺寸 
* @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 方法, 这是一个四舍五入取整方法, 如果要你自己实现这个功能, 你会如何处理? (提示: 可参考计算机图形学关于线条走样的处理方法)

Javascript 相关文章推荐
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
Feb 07 Javascript
关于JavaScript的with 语句的使用方法
May 09 #Javascript
JavaScript的parseInt 取整使用
May 09 #Javascript
实现变速回到顶部的JavaScript代码
May 09 #Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 #Javascript
Chrome Form多次提交表单问题的解决方法
May 09 #Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 #Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 #Javascript
You might like
php数组的概述及分类与声明代码演示
2013/02/26 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
php创建类并调用的实例方法
2019/09/25 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
J2EE面试题集锦(附答案)
2013/08/16 面试题
护士自我鉴定
2013/10/23 职场文书
电子商务专业个人的自我评价分享
2013/10/29 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
学校会议通知范文
2015/04/15 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
导游词之西安骊山
2019/12/03 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP