放大镜jQuery效果

时间：2023-11-25 10:27:38

今天我们来写一下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区别,我们下次见

相关文章