放大镜jQuery效果

向右看齐 2021-10-01 03:30 501阅读 0赞

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

1,html代码

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

2,css代码

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

3,jQuery代码

1  //===============================放大镜开始===========================
     2          $("#images img").click(function (){
     3              var src = $(this).attr("src");
     4              //小图 大图
     5              $("#small img").attr("src",src);
     6              $("#big img").attr("src",src);
     7          });
     8          //2 鼠标移动 
     9          $('#small').mousemove(function(ent){
    10              //大盒子显示 放大镜显示
    11              $("#big").css("display","block");
    12              $("#move").css("display","block");
    13              //获得鼠标
    14              var ent  = ent || window.event;
    15              var m_w = $("#move").width();
    16              var m_h = $("#move").height();
    17              //放大镜不能出盒子范围 
    18              var minX = $("#small").offset().left+m_w/2;
    19              var maxX = $("#small").width()+$("#small").offset().left-m_w/2;
    20              var minY = $("#small").offset().top+m_h/2;
    21              var maxY = $("#small").height()+$("#small").offset().top-m_h/2;
    22              if(ent.pageX<minX){
    23                  ent.pageX=minX;
    24              }else if(ent.pageX>maxX){
    25                  ent.pageX=maxX;
    26              }else{
    27                  $("#move").css("left",(ent.pageX-m_w/2-$("#small").offset().left));
    28                  // $("#move").css("left",(ent.pageX-$("#small").offset().left));
    29              }
    30              if(ent.pageY<minY){
    31                  ent.pageY=minY;
    32              }else if(ent.pageY>maxY){
    33                  ent.pageY=maxY;
    34              }else{
    35                  $("#move").css("top",(ent.pageY-m_h/2-$("#small").offset().top));
    36                  // $("#move").css("top",(ent.pageY-$("#small").offset().top));
    37              }
    38              //大盒子随鼠标的移动位置
    39              $("#big").scrollTop((ent.pageY-$("#small").offset().top)*2.5-200);
    40              $("#big").scrollLeft((ent.pageX-$("#small").offset().left)*2.5-250);
    41              //添加鼠标样式
    42              $("#small").css("cursor","move");
    43          });
    44          //3 鼠标移出
    45          $("#small").mouseout(function(){
    46              $("#big").css("display","none");
    47              $("#move").css("display","none");
    48              $("#small").css("cursor","default");
    49          });
    50 //===============================放大镜结束===========================

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

转载于:https://www.cnblogs.com/caixiufang/p/6608031.html