js 實現放大鏡效果

時間 2020-06-18
原文原文鏈接
效果圖html
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <title>仿京東放大鏡效果</title>
  7     <style>
  8         .wrap{
  9             width: 400px;
 10             height: 400px;
 11             margin: 150px auto;
 12             border: 1px solid #999999;
 13             /* background: url('images/pic.jpg') no-repeat center center;
 14             background-size: 100%; */
 15             position: relative;
 16             /* overflow: hidden; */
 17         }
 18         .move{
 19             display: none;
 20             width: 150px;
 21             height: 150px;
 22             background: yellow;
 23             opacity: .3;
 24             position: absolute;
 25             left: 0;
 26             top: 0;
 27             cursor: move;
 28         }
 29         .big{
 30             display: none;
 31             width: 500px;
 32             height: 500px;
 33             border: 1px solid #999999;
 34             position: absolute;
 35             left: 410px;
 36             top: 0;
 37             z-index: 9999;
 38             overflow: hidden;
 39             /* background: url('images/pic.jpg') no-repeat center center;
 40             background-size: 100%; */
 41         }
 42         .bigimg{
 43             position: absolute;
 44             left: 0;
 45             top: 0;
 46         }
 47     </style>
 48 </head>
 49 <body>
 50     <div class="wrap">
 51         <img src="images/pic.jpg" alt="" style="width: 100%;">
 52         <div class="move"></div>
 53         <div class="big"><img src="images/big.jpg" alt="" style="width: ;" class="bigimg"></div>
 54     </div>
 55     <script>
 56         var wrap = document.querySelector('.wrap');
 57         var move = document.querySelector('.move');
 58         var big = document.querySelector('.big');
 59         // 鼠標移入移除顯示圖片和放大鏡
 60         wrap.addEventListener('mouseover',function(){
 61             move.style.display = 'block';
 62             big.style.display = 'block';
 63         });
 64         wrap.addEventListener('mouseout',function(){
 65             move.style.display = 'none';
 66             big.style.display = 'none';
 67         });
 68         // 計算鼠標在盒子內的座標
 69         wrap.addEventListener('mousemove',function(e){
 70             var x = e.pageX - this.offsetLeft;
 71             var y = e.pageY - this.offsetTop;
 72             // 讓鼠標顯示在盒子的正中間
 73             movex =  x - move.offsetWidth / 2;
 74             movey =  y - move.offsetHeight / 2;
 75             // 解決放大鏡的移動到邊界問題
 76             //若是x軸的座標小於0 ，就讓他停留在 0 的位置
 77             moveMax = wrap.offsetWidth - move.offsetWidth;
 78             if(movex <= 0){
 79                 movex = 0;
 80             }else if(movex >= moveMax){
 81                 movex = moveMax;
 82             }
 83             // 若是y軸的座標小於0 ，就讓他停留在 0 的位置
 84             if(movey <= 0){
 85                 movey = 0;
 86             }else if(movey >= moveMax){
 87                 movey = moveMax;
 88             }
 89             move.style.left = movex + 'px';
 90             move.style.top = movey + 'px';
 91 
 92             // 圖片跟隨移動   大圖片的移動距離 = (遮擋層的移動距離 * 大圖片的最大移動距離) / 遮擋層最大移動距離
 93 
 94             // 獲取大圖
 95             var bigimg = document.querySelector('.bigimg');
 96             // 大圖的最大移動距離
 97             var bigMax = bigimg.offsetWidth - big.offsetWidth;
 98             // 大圖片的移動距離 x，y
 99             var bigx = movex * bigMax / moveMax;
100             var bigy = movey * bigMax / moveMax;
101             bigimg.style.left = -bigx + 'px';
102             bigimg.style.top = -bigy + 'px';
103         })
104 
105     </script>
106 </body>
107 </html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。