放大鏡

前提：兩張圖（200x200 , 450x450）

<style> .myDiv{position: relative;width: 200px;height: 200px;} .float_lay{width: 50px;height: 50px;border:1px solid #3c9;background: rgba(255,255,255,.6); position: absolute;top:0;left: 0;cursor: pointer; } .smallBox{position: relative;width:200px;height: 200px;} .smallBox img{height: 100%;} .largeBox{position: absolute;top:0;left:320px;border:4px solid #ff5454;overflow: hidden; width: 250px;height:250px;}
</style>
<div class="myDiv">
  <div class="smallBox">
    <div class="float_lay"></div>
    <img class="smallImg" src="../public/images/small.png" alt=""/>
  </div>
  <div class="largeBox">
    <img class="largeImg" src="../public/images/big.png" alt=""/>
  </div>
</div>
<script> $(function () { $smallBox.on('mousemove',function (e) {//火狐沒有event，因此須要傳
       var divPos=$('.myDiv').offset();//獲取圖片距離頁面邊距
       var x=e.clientX; var y=e.clientY; var picLeft=x-divPos.left-25; var picTop=y-divPos.top-25; var seePic=$('.largeBox').width(); var largePic=$('.largeBox img').width(); var percentL; var percentT; if(picLeft<0){ picLeft=0; }else if(picLeft>150){ picLeft=150; } if(picTop<0){ picTop=0; }else if(picTop>150){ picTop=150; } $('.float_lay').css({top:picTop+'px',left:picLeft+'px'}); percentL=-picLeft/150*(largePic-seePic);
 percentT=-picTop/150*(largePic-seePic);
 $('.largeBox img').css({marginTop:percentT+'px',marginLeft:percentL+'px'}); }); }); </script>