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>
巴特西

jq-demo-放大镜

最新文章

热门文章
