案例--放大镜（jq）

直接上图，图中有解析

$(function(){        
var myDiv=$('#myDiv')       
 $('#myDiv .smallPic').hover(function(){          
   $('#myDiv .float_lay').css({display:'block'})          
     $('#myDiv .bigPic').css({display:'block'})        }，
function(){            
$('#myDiv .float_lay').css({display:'none'})           
 $('#myDiv .bigPic').css({display:'none'})        });      
   $('#myDiv .smallPic').on('mousemove',function(e){            
   var divPosi=$('#myDiv').offset();//取得图片距离页面的边距          
     var xx=e.clientX;            
     var yy=e.clientY;            
     //去除边框防止遮挡层出去不好看           
      //parseInt将px去掉           
       var maxX=parseInt($('.smallPic').width())-parseInt($('.float_lay').width())-parseInt($('.float_lay').css('border-width'))           
        var maxY=parseInt($('.smallPic').height())-parseInt($('.float_lay').height())-parseInt($('.float_lay').css('border-width'))            
        var picLeft=xx-divPosi.left-25;           
         var picTop=yy-divPosi.top-25;          
           var seePic=$('#myDiv .bigPic').width();           
            var bigPic=$('#myDiv .bigPic img').width();            
            var percentL;            
            var percentT;            
            //
  
            
              if(picLeft<0){               
               picLeft=0            }else if(picLeft>maxX){              
                 picLeft=maxX            }           
                  if(picTop<0){              
                    picTop=0            }else if(picTop>maxY){          
                          picTop=maxY            }           
                           $('#myDiv .float_lay').css({top:picTop+'px',left:picLeft+'px'})          
                             //数学相似原理：            
                             //  遮挡移动最大距离/大图移动最大距离=遮挡移动距离/大图移动距离            
                             percentL=-picLeft/maxX*(bigPic-seePic)           
                              percentT=-picTop/maxY*(bigPic-seePic)           
                               $('#myDiv .bigPic img').css({marginTop:percentT+'px',marginLeft:percentL+'px'})        });    });