jq-demo-放大镜

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title></title>

         <style>
             #smallImg {
                 position: absolute;
                 left: 50px;
                 top: 100px;
             }
             #smallImg, #smallImg img {
                 width: 200px;
                 height: 200px;
             }
             #smallArea {
                  display: none;
                  width: 50px; height: 50px; background: rgba(200, 222,111, 0.3);
                  position: absolute; left: 50px; top: 0;
             }

             #bigArea {
                  display: none; overflow: hidden;
                  width: 300px; height: 300px; background: rgba(200,111,222,0.3);
                  position: absolute; left: 300px; top: 100px;
             }
             #bigImg {
                 width: 800px; height: 800px;
                 position: absolute; left: 0; top: 0;
             }

         </style>

         <script type="text/javascript" src="js/jquery-1.12.3.js" ></script>
         <script>
             $(function(){

                 //等比公式
                 //小图width/大图width == 小区域width/大区域width
                 $("#smallArea").width( $("#smallImg").width() * $("#bigArea").width() / $("#bigImg").width() );
                 $("#smallArea").height( $("#smallImg").height() * $("#bigArea").height() / $("#bigImg").height() );

                 //放大系数
                 var scale = $("#bigImg").width() / $("#smallImg").width();

                 //在小图中移动
                 $("#smallImg").mousemove(function(e){
                     $("#smallArea").show(); //显示小区域
                     $("#bigArea").show(); //显示大区域

                     var x = e.pageX - $("#smallImg").offset().left - $("#smallArea").width()/2;
                     var y = e.pageY - $("#smallImg").offset().top - $("#smallArea").height()/2;

                     //控制不超出左右边界
                     if (x < 0){
                         x = 0;
                     }
                     else if (x > $("#smallImg").width()-$("#smallArea").width()){
                         x = $("#smallImg").width()-$("#smallArea").width();
                     }
                     //控制不超出上下边界
                     if (y < 0){
                         y = 0
                     }
                     else if (y > $("#smallImg").height()-$("#smallArea").height()) {
                         y = $("#smallImg").height()-$("#smallArea").height();
                     }

                     //小区域移动
                     $("#smallArea").css({left:x, top:y});

                     //大图移动
                     $("#bigImg").css({left: -scale*x,top: -scale*y});
                 })

                 //移除小图
                 $("#smallImg").mouseleave(function(){
                     $("#smallArea").hide(); //隐藏小区域
                     $("#bigArea").hide(); //隐藏大区域
                 })
             })
         </script>
     </head>
     <body>
         <div id="smallImg">
             <img src="data:images/星际穿越.jpg" />
             <div id="smallArea"></div>
         </div>
         <div id="bigArea">
             <img id="bigImg" src="data:images/星际穿越.jpg" />
         </div>
     </body>
 </html>