JQuery Magnifier是一種非常有用的JQuery插件，它可以幫助我們快速創建一個圖片放大鏡效果。該插件非常容易使用，并且可以定制。

$(document).ready(function(){
$('.image-magnifier').hover(function(){
$(this).css('cursor','none');
var imageWidth = $(this).width();
var imageHeight = $(this).height();
var magnifierWidth = $(this).find('.magnifier').width();
var magnifierHeight = $(this).find('.magnifier').height();
$(this).mousemove(function(e){
var mouseX = e.pageX - $(this).offset().left - magnifierWidth/2;
var mouseY = e.pageY - $(this).offset().top - magnifierHeight/2;
if(mouseX< 0){
mouseX = 0;
}
if(mouseX >imageWidth - magnifierWidth){
mouseX = imageWidth - magnifierWidth;
}
if(mouseY< 0){
mouseY = 0;
}
if(mouseY >imageHeight - magnifierHeight){
mouseY = imageHeight - magnifierHeight;
}
$(this).find('.magnifier').css({left:mouseX,top:mouseY});
var ratioX = -(mouseX/magnifierWidth);
var ratioY = -(mouseY/magnifierHeight);
$(this).find('img').css({left:ratioX*(imageWidth-magnifierWidth),
top:ratioY*(imageHeight-magnifierHeight)});
});
},function(){
$(this).css('cursor','auto');
$(this).unbind('mousemove');
});
});

這段代碼會對具有類“image-magnifier”的元素進行處理。它在這些元素中創建一個.onmouseover事件監聽器，以便在鼠標移動到圖像上時觸發放大鏡效果。當鼠標懸停時，插件會計算所需的圖像和放大鏡的高度、寬度和位置，并對鼠標的位置進行修正，以確保放大鏡不會離開圖像的邊界。最后，它會使用相關計算來移動圖像，以便可以呈現放大鏡中的部分。