功能說明：

在淘寶，京東之類的電子商務網站一般會有商品放大瀏覽功能，幫助顧客分析產品質量，這次的放大器程序正是模仿了這種效果，并支持如下功能：

1.圖片局部放大。

2.鼠標滾輪調整放大倍數。

支持IE6 7 8 firefox chrome

效果預覽：

實現原理：

這次的圖片放大器實現簡單來說就是：分層+裁剪

分層：

在原圖區域，圖片被分成三層：

1.原圖層：就是一開始看到的圖片。

2.透明遮罩層：原圖層上面的半透明層，用于產生遮罩效果。

3.手柄區域層：就是跟隨鼠標移動的手柄區域，手柄區域內容在右邊被放大。

裁剪：

裁剪主要用在兩個地方，一個是對原圖中手柄區域層的裁剪，一個是放大區域對大圖的裁剪。

代碼分析：

imgEnlarger.enlarge = function(imgElem, times, windowSize, winLeft, winTop, imgLeft, imgTop, containerId)

首先有必要先看看傳入的參數：

imgElem：原圖對象。

tims：默認縮放倍數。

windowSize：顯示窗口大小。

winLeft，winTop，imgLeft，imgTop分別為顯示窗口和原圖的位置參數。

function initImgsAndOpacityDiv() {

imgElm2.src = bigImg.src = imgElem.src;

imgElm2.onload = function() {

setImgsAndDivStyle(imgElem, imgElm2, opacityDiv, bigImg);

document.body.appendChild(bigImg);
container.appendChild(opacityDiv);
container.appendChild(imgElm2);

}
}

這里分別設置三層（原圖層，透明層，手柄層）的樣式，并且需要注意的是，要在圖片加載完后才開始后面設置樣式的操作，否則會造成后面的操作出現問題。

function setBigImgRect(rect) {
bigImg.style.clip = 'rect(' + parseInt(rect.top) * times + 'px ' + parseInt(rect.right) * times + 'px ' + parseInt(rect.bottom) * times + 'px ' + parseInt(rect.left) * times + 'px)';
bigImg.style.top = winTop - parseInt(rect.top) * times + 'px';
bigImg.style.left = winLeft - parseInt(rect.left) * times + 'px'; }

設置大圖剪裁區域的函數，上面說過，放大效果的實現其實就是把一幅大圖通過剪裁，然后再根據鼠標坐標定位的過程。注意要乘上默認的放大倍數times。

function setImgRect(rect) {
imgElem.style.clip = 'rect(' + rect.top + ' ' + rect.right + ' ' + rect.bottom + ' ' + rect.left + ')';
}

然后是設置手柄層圖像剪裁區域的函數，除了放大效果依賴于剪裁外，跟隨手柄移動的圖像層也通過剪裁實現，差別只是大圖在剪裁后需要重新設置left和top的值，手柄區域剪裁后并不需要重新定位。

document.onmousemove = function(eve) {
eve = eve || window.event;
tar = eve.target || eve.srcElement;
if (tar == imgElem || tar == opacityDiv) {
rec = new Rect(parseInt(eve.clientX) - halfWidth - imgLeft, parseInt(eve.clientY) - halfHight - imgTop - container.offsetTop, parseInt(Handler.style.width));
setImgRect(rec);
bigImg.style.display = 'block';
setBigImgRect(rec);

}
}

對鼠標移動事件的處理程序綁定。鼠標移動過程中，根據鼠標的坐標，重新剪裁手柄區域圖片和大圖，產生圖像跟隨鼠標移動以及在右邊放大的效果。注意這里因為是為document注冊事件處理程序，所以要判斷target是否為圖像對象。

if (navigator.userAgent.indexOf("Firefox") < 0) {
document.onmousewheel = resize;

}
else {
document.addEventListener("DOMMouseScroll", resize, false);
}

/* reset the style of images and handler */
function resize(eve) {

eve = eve || window.event;
if (navigator.userAgent.indexOf("Firefox") > 0) {

times += eve.detail / 3;

}
else
times += eve.wheelDelta / 120;

firefox和非firefox對鼠標滾動事件的處理都不同，因此需要檢測后分別處理。關于這個知識點詳細可見這里：http://www.javascriptkit.com/javatutors/onmousewheel.shtml

function resize(eve) {

eve = eve || window.event;
if (navigator.userAgent.indexOf("Firefox") > 0) {

times += eve.detail / 3;

}
else
times += eve.wheelDelta / 120;

times = Math.min(Math.max(0.8, times), 15); //the max time is 15,and the min time is 0.8
bigImg.style.width = parseInt(imgElem.clientWidth) * times + 'px';
bigImg.style.height = parseInt(imgElem.clientHeight) * times + 'px';
Handler.style.height = Handler.style.width = windowSize / times + 'px';
halfWidth = parseInt(Handler.style.width) / 2;
halfHight = parseInt(Handler.style.height) / 2;

rec = new Rect(parseInt(eve.clientX) - halfWidth - imgLeft, parseInt(eve.clientY) - halfHight - imgTop, parseInt(Handler.style.width));
setImgRect(rec);

setBigImgRect(rec);

if (!window.event)
eve.preventDefault();

return false;
}

}

mousewheel的事件處理程序中，通過鼠標滾動設置放大倍數，這里使用max和min函數來限制放大的最大和最小倍數（注意在平時很多時候都會遇到使用max和min函數搭配規定數值范圍的情況）。此外，重置大圖的樣式，包括：高度，寬度，并且重新設置裁剪區域。另外需要注意的是，firefox需要通過preventDefault來禁止滑輪滾動默認行為，以防滾動條發生滾動。（IE下則是用后面的return false）。

function Rect(left, top, width) {
this.left = left + 'px';
this.top = top + 'px';
this.right = parseInt(this.left) + width + 'px';
this.bottom = parseInt(this.top) + width + 'px';

}

最后這個是一個裁剪區域對象的構造函數。正如前面所說，由于手柄層和大圖層都需要用到圖片裁剪，因此這里把圖片裁剪需要用到的參數封裝在一個裁剪對象的構造函數里，每次通過初始化不同裁剪對象，傳入不同的裁剪函數，實現不同的裁剪操作。

總結

以上是生活随笔為你收集整理的【CSON原创】 图片放大器效果发布的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。