名站网址导航为大家提供关于网站网页设计设计相关的的教程知识。
- 本篇文章具体介绍如下
一个完整的放大镜结构里, 与倍率扯上关系的一共有 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调用asp.net 页面后台的实现具体代码-jquery