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 相关文章推荐
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
javascript如何写热点图
Dec 08 Javascript
Javascript之String对象详解
Jun 08 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
vue.js中$set与数组更新方法
Mar 08 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 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-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
如何编写jquery插件
2017/03/29 jQuery
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
基于vue实现可搜索下拉框定制组件
2020/03/26 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
python进阶教程之词典、字典、dict
2014/08/29 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
django2笔记之路由path语法的实现
2019/07/17 Python
如何在python中写hive脚本
2019/11/08 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
优质服务活动实施方案
2014/05/02 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
毕业生自荐信范文
2015/03/05 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
员工辞职信范文大全
2015/05/12 职场文书
医院见习总结
2015/06/24 职场文书
开工典礼致辞
2015/07/29 职场文书
初级职称评定工作总结
2015/08/13 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫