前端之家收集整理的这篇文章主要介绍了
jQuery实现的放大镜效果示例，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
本文实例讲述了jQuery实现的放大镜效果。分享给大家供大家参考，具体如下：
zoom.css：
zoom.html：
=smallImgLiLength-4){
$(this).addClass('disable');
now = smallImgLiLength-4;
}else{
now++;
smallImgUl.animate({'left':-now*smallImgLiWidth},300);
}
});
leftBtn.click(function(){
if(now==0){
now=0;
}else{
now--;
smallImgUl.animate({'left':'+='+smallImgLiWidth},300);
}
});
zoomMiddleDiv.mousemove(function(e){
$('.mask').show();
$('.zoomLarge').show();
zoomMiddleDivOffset = zoomMiddleDiv.offset();
var x = e.pageX - zoomMiddleDivOffset.left - $('.mask').width()/2;
var y = e.pageY - zoomMiddleDivOffset.top - $('.mask').height()/2;
if(x<=0){
x=0;
}else if(x>=zoomMiddleDiv.width()-$('.mask').width()){
x = zoomMiddleDiv.width()-$('.mask').width();
}
if(y<=0){
y=0;
}else if(y>=zoomMiddleDiv.height()-$('.mask').height()){
y = zoomMiddleDiv.height()-$('.mask').height();
}
var percentageX = x/(zoomMiddleDiv.width()-$('.mask').width());
var percentageY = y/(zoomMiddleDiv.height()-$('.mask').height());
$('.zoomLarge img').css({
left:-percentageX*(600-$('.zoomLarge').width()),top:-percentageY*(600-$('.zoomLarge').height())
});
$('input').val(percentageX+','+percentageY)
$('.mask').css({
'left':x+'px','top':y+'px'
});
});
zoomMiddleDiv.mou
SEOut(function(){
$('.mask').hide();
$('.zoomLarge').hide();
});
});
