放大镜jQuery效果

今天我们来写一下jQuery的效果来上代码

1,html代码

       <div id='small'><img src="./icon/images/sj1.jpg" alt="" width='100%'><div id='move'></div></div>
         <ul id="images">
           <li><img class="imgs" src="./icon/images/sj1.jpg" alt="" width="100%"></li>
           <li><img class="imgs" src="./icon/images/sj6.jpg" alt="" width="100%"></li>
           <li><img class="imgs" src="./icon/images/sj7.jpg" alt="" width="100%"></li>
         </ul>
         <div id='big'><img src="./icon/images/sj1.jpg" alt="" id='img'></div>

2,css代码

 #small{border:1px solid #ccc;position: absolute;top:220px;}
 #move{width:150px;height:100px;position: absolute;left:;top:;background: url(bg.png);display: none;}
 #images{position: absolute;top:560px;left:200px;width:1000px;height:100px;}
 #images li { width: 70px;height: 70px;float: left;margin-right: 10px;border: solid 1px #ccc;padding:4px;}
 #big{width:300px;height:308px;text-align:center;border:1px solid #ccc;position: absolute;left:500px;top:220px;overflow:hidden;display: none;}
 #big #img{position: absolute;left:-100px;}

3,jQuery代码

  //===============================放大镜开始===========================
          $("#images img").click(function (){
              var src = $(this).attr("src");
              //小图 大图
              $("#small img").attr("src",src);
              $("#big img").attr("src",src);
          });
          //2 鼠标移动
          $('#small').mousemove(function(ent){
              //大盒子显示 放大镜显示
              $("#big").css("display","block");
              $("#move").css("display","block");
              //获得鼠标
              var ent  = ent || window.event;
              var m_w = $("#move").width();
              var m_h = $("#move").height();
              //放大镜不能出盒子范围
              var minX = $("#small").offset().left+m_w/2;
              var maxX = $("#small").width()+$("#small").offset().left-m_w/2;
              var minY = $("#small").offset().top+m_h/2;
              var maxY = $("#small").height()+$("#small").offset().top-m_h/2;
              if(ent.pageX<minX){
                  ent.pageX=minX;
              }else if(ent.pageX>maxX){
                  ent.pageX=maxX;
              }else{
                  $("#move").css("left",(ent.pageX-m_w/2-$("#small").offset().left));
                  // $("#move").css("left",(ent.pageX-$("#small").offset().left));
              }
              if(ent.pageY<minY){
                  ent.pageY=minY;
              }else if(ent.pageY>maxY){
                  ent.pageY=maxY;
              }else{
                  $("#move").css("top",(ent.pageY-m_h/2-$("#small").offset().top));
                  // $("#move").css("top",(ent.pageY-$("#small").offset().top));
              }
              //大盒子随鼠标的移动位置
              $("#big").scrollTop((ent.pageY-$("#small").offset().top)*2.5-200);
              $("#big").scrollLeft((ent.pageX-$("#small").offset().left)*2.5-250);
              //添加鼠标样式
              $("#small").css("cursor","move");
          });
          //3 鼠标移出
          $("#small").mouseout(function(){
              $("#big").css("display","none");
              $("#move").css("display","none");
              $("#small").css("cursor","default");
          });
 //===============================放大镜结束===========================

以上就是jQuery实现的放大镜我还是那句话clientx/y与pagex/y的不同不然放大镜bug会很大,下次让我们来了解一下pageX/Y与offsetx/y  clientx/y区别,我们下次见