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

复制代码 代码如下:

/**
* 获取放大镜放大倍数
* @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;
}

复制代码 代码如下:

/**
* 加载镜片的样式
* @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';
}

复制代码 代码如下:

/**
* 返回视窗尺寸
* @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;
}