jQuery实现的放大镜效果示例

这篇文章主要介绍了jQuery实现的放大镜效果,结合实例形式分析了jQuery插件zoom.js实现放大镜功能的相关操作技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现的放大镜效果。分享给大家供大家参考，具体如下：

zoom.css：

 *{ padding: 0; margin: 0; } li{ list-style-type: none; } .zoom{ margin: 50px; position: relative; } .zoomMiddle{ border: 1px solid #ccc; width: 300px; height: 300px; margin-bottom: 3px; position: relative; } .zoomMiddle img{ width: 300px; height: 300px; } .mask{ width: 100px; height: 100px; background: #abcdef; opacity:0.4; position: absolute; left: 0; top: 0; display: none; } .zoomSmall{ -overflow: hidden; width: 302px; height: 54px; } .zoomSmall span{ float: left; height: 52px; line-height: 52px; width: 10px; text-align: center; border: 1px solid #ccc; cursor: pointer; } .zoomSmall span.disable{ cursor: default; background: #ccc; } .wrapSmallImg{ float: left; height: 54px; width: 232px; /*background: #f00;*/ position: relative; overflow: hidden; } .wrapSmallImg ul{ width: 348px; /*background: #f00;*/ position: absolute; left: 0; top: 0; } .wrapSmallImg ul li{ float: left; width: 50px; height: 50px; border: 2px solid #ccc; margin: 0 2px; _display: inline; cursor: pointer; } .wrapSmallImg ul li.current{ border: 2px solid orange; } .wrapSmallImg ul li img{ width: 50px; height: 50px; } .zoomLarge{ width: 350px; height: 350px; border: 1px solid #ccc; position: absolute; top: 0; left: 320px; overflow: hidden; display:none; } .zoomLarge img{ width: 600px; height:600px; position: absolute; left: 0; top: 0; }

zoom.html：

   放大镜   
 <  
>

zoom.js：

 $(function(){ var smallImgLi = $('.wrapSmallImg ul li'); var smallImgLiLength = smallImgLi.size(); var smallImgLiWidth = smallImgLi.outerWidth(true); var smallImgUl = $('.wrapSmallImg ul'); var leftBtn = $('span.left'); var rightBtn = $('span.right'); var now = 0; var zoomMiddleDiv = $('.zoomMiddle'); smallImgLi.mouseover(function(){ $(this).addClass('current').siblings().removeClass('current'); var thisSrc = $(this).children('img').attr('src'); $('.zoomMiddle img').attr('src',thisSrc); $('.zoomLarge img').attr('src',thisSrc); }); rightBtn.click(function(){ //当now=2的时候，我们不希望再让他滚动了 leftBtn.removeClass('disable'); if(now>=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.mouseout(function(){ $('.mask').hide(); $('.zoomLarge').hide(); }); });

效果图如下：