分别用javascript，jquery实现对图片的放大镜效果_jquery实现触碰图片特效-优快云博客

本文介绍了如何使用纯 JavaScript 和 jQuery 实现图片放大镜效果。通过鼠标移动来改变小图上遮罩的位置，并相应地调整大图显示的部分。该效果常用于商品展示等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
#dsmall{
    height: 200px;
    width: 200px;
    border: solid 1px;
    float: left;
    position: relative;
    left: 5px;
    top: 5px;
    overflow: hidden;
}
#dsmall img{
    height: 200px;
}
#smallblock{
    height: 40px;
    width: 40px;
    background-color: white;
    opacity: 0.5;
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
}
#dbig{
   /* display: none;*/
    height: 400px;
    width: 400px;
    position: absolute;
    left: 250px;
    top:13px;
    overflow: hidden;
    display: none;
}
#bigimg{
    height: 480px;
    position: absolute;
    left: 0px;
    right: 0px;
    }
 </style>

</head>
<body>
<div id="dsmall">
<img src="img/small.jpg" alt="">
<div id="smallblock"></div>
</div> 
<div id="dbig">
<img src="img/big.jpg" alt="" id="bigimg"> 
</div>


 <script src="js/jquery.min.js"></script>
 <script>
       var oSmall=document.getElementById("dsmall");
       var oSBlock=document.getElementById("smallblock");
       var oBig=document.getElementById("dbig");
       var oBImg=document.getElementById("bigimg");
       oSmall.onmouseover = function(){
           oSBlock.style.display='block';
           oBig.style.display='block';
       }
       oSmall.onmouseout = function(){
            oSBlock.style.display='none';
            oBig.style.display='none';
       }
       oSmall.onmousemove = function(e){
           var e=e||window.event;
           var sleft=e.clientX-oSmall.offsetLeft-oSBlock.offsetWidth/2;
           var stop=e.clientY-oSmall.offsetTop-oSBlock.offsetHeight/2;
           if(sleft>oSmall.offsetWidth-oSBlock.offsetWidth){
               sleft=oSmall.offsetWidth-oSBlock.offsetWidth;
           }
           if(sleft<0){
            sleft=0;
           }
           if(stop>oSmall.offsetHeight-oSBlock.offsetHeight){
               stop=oSmall.offsetHeight-oSBlock.offsetHeight;
           }
           if(stop<0){
            stop=0;
           }
           oSBlock.style.left=sleft+'px';
           oSBlock.style.top=stop+'px';

           var fleft=sleft/(oSmall.offsetWidth-oSBlock.offsetWidth);
           var ftop=stop/(oSmall.offsetHeight-oSBlock.offsetHeight);
           oBImg.style.left=fleft*(oBig.offsetWidth-oBImg.offsetWidth)+'px';
           oBImg.style.top=ftop*(oBig.offsetHeight-oBImg.offsetHeight)+'px';

       }
 </script>
</body>
</html>

jquery实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
#dsmall{
    height: 200px;
    width: 200px;
    border: solid 1px;
    float: left;
    position: relative;
    left: 5px;
    top: 5px;
    overflow: hidden;
}
#dsmall img{
    height: 200px;
}
#smallblock{
    height: 40px;
    width: 40px;
    background-color: white;
    opacity: 0.5;
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
}
#dbig{
   /* display: none;*/
    height: 400px;
    width: 400px;
    position: absolute;
    left: 250px;
    top:13px;
    overflow: hidden;
    display: none;
}
#bigimg{
    height: 480px;
    position: absolute;
    left: 0px;
    right: 0px;
    }
 </style>

</head>
<body>
<div id="dsmall">
<img src="img/small.jpg" alt="">
<div id="smallblock"></div>
</div> 
<div id="dbig">
<img src="img/big.jpg" alt="" id="bigimg"> 
</div>


 <script src="js/jquery.min.js"></script>
 <script>
$(function(){
  var $dsmall=$('#dsmall');
  var $smallblock=$('#smallblock');
  var $dbig=$('#dbig');
  var $bigimg=$('#bigimg');
    $dsmall.hover(function(){
          $smallblock.show();
          $dbig.show();
    },function(){
          $smallblock.hide();
          $dbig.hide();
    })
    $dsmall.mousemove(function(e){
         var sleft=e.pageX-$dsmall.offset().left-$smallblock.width()/2;

         var stop=e.pageY-$dsmall.offset().top-$smallblock.height()/2;


         if(sleft<0){
            sleft=0;
           }
         if(stop<0){
            stop=0;
           }
        if(sleft>$dsmall.width()-$smallblock.width())
        {
          sleft=$dsmall.width()-$smallblock.width();
        }
        if(stop>$dsmall.height()-$smallblock.height())
        {
          stop=$dsmall.height()-$smallblock.height();
        }
         $smallblock.css({
          left:sleft,
          top:stop
         });

         var fleft=sleft/($dsmall.width()-$smallblock.width());
         var ftop=stop/($dsmall.height()-$smallblock.height());
         var bleft=fleft*($dbig.width()-$bigimg.width());
         var btop=ftop*($dbig.height()-$bigimg.height());
         $bigimg.css({
          left:bleft,
          top:btop
         })
    })
})
 </script>
</body>
</html>