效果展示

image.png思路

  • 使用jquery获取dom和css等
  • 主要是计算滑块在当前盒子中滑动的比例，到展示出来的图片在大盒子的位置
  • 动态计算

JS版本

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <style>
  9.     *{
  10.         margin: 0;
  11.         padding: 0;
  12.     }
  13.     .wrapper{
  14.         padding: 30px 10%;
  15.     }
  16.     .current-box , .target-box{
  17.         float: left;
  18.     }
  20.     .current-box{
  21.         position: relative;
  22.     }
  24.     .current-box .current-image-box{
  25.         width: 300px;
  26.         height: 300px;
  27.     }
  29.     .current-box .current-image-box img{
  30.         width: 100%;
  31.         height: 100%;
  32.     }
  34.     .current-box .mast{
  35.         position: absolute;
  36.         width: 100px;
  37.         height:100px;
  38.         background-color: rgba(255, 0, 0, 0.3);
  39.         top: 0;
  40.         left: 0;
  41.         display:none;
  42.     }
  44.     .target-image-box{
  45.         position: relative;
  46.         width: 400px;
  47.         height: 400px;
  48.         overflow: hidden;
  49.         border: 2px dashed #999;
  50.     }
  51.     .target-image-box .target-image{
  52.         position: absolute;
  53.         top: 0;
  54.         left: 0;
  55.     }
  57. </style>
  58. <body>
  59.     <div class="wrapper">
  60.          <div class="current-box">
  61.               <div class="current-image-box">
  62.                  <img  class="current-image" src="./images/1.jpeg"></img>
  63.               </div>
  64.               <div class="mast"></div>
  65.          </div>
  66.          <div class="target-image-box">
  67.             <img class="target-image" src="./images/1.jpeg"></img>
  68.          </div>
  69.     </div>
  70. </body>
  71. <script>
  72.     // 思路，
  73.     // 1、通过计算当前照片和mask的比例计算出要展示的照片的大小来
  74.     let  wrapper = document.getElementsByClassName('wrapper')[0],
  75.     currentBox = document.getElementsByClassName('current-box')[0],
  76.     currentImageBox = document.getElementsByClassName('current-image-box')[0],
  77.     currentImage = document.getElementsByClassName('current-image')[0],
  78.     mast = document.getElementsByClassName('mast')[0],
  79.     targetImageBox = document.getElementsByClassName('target-image-box')[0],
  80.     targetImage =  document.getElementsByClassName('target-image')[0];
  81.     // 获取元素的高度和宽地的方法
  82.     function getStyle(element,attr){
  83.         return Number.parseInt(window.getComputedStyle(element)[attr])
  84.     }
  85.     // 设置css样式的方法
  86.     function setCss(element,attr,value){
  87.         element.style[attr] = value
  88.     }
  89.     // 获取offset到BODY的距离
  90.     function offset(element){
  91.         let offsetL = element.offsetLeft,
  92.             offsetT=element.offsetTop,
  93.             parentEle=element.offsetParent;
  94.         while(parentEle&&parentEle.targetName !=='BODY'){
  95.             offsetL+= parentEle.offsetLeft;
  96.             offsetT+= parentEle.offsetTop;
  97.             parentEle = parentEle.offsetParent;
  98.         }
  99.         return {
  100.             left:offsetL,
  101.             top:offsetT
  102.         }
  103.     }
  104.     // 让mask比上当前盒子的比例乘以目标盒子的宽高为目标图片的宽高
  105.     let currentH = getStyle(currentBox,'height'),
  106.     currentW = getStyle(currentBox,'width'),
  107.     currentL = currentBox.offsetLeft,
  108.     currentT = currentBox.offsetTop,
  109.     mastH = getStyle(mast,'height'),
  110.     mastW = getStyle(mast,'width'),
  111.     mastL = offset(mast).left,
  112.     mastT = offset(mast).top,
  113.     targetW = getStyle(targetImageBox,'height'),
  114.     targetH = getStyle(targetImageBox,'width');
  115.     setCss(targetImage,'width', currentW/mastW*targetW + 'px')
  116.     setCss(targetImage,'height', currentH/mastH*targetH + 'px')
  117.     let scale = currentW/mastW*targetW / currentW;
  118.     // console.log(scale,'scale')  // 4
  119.     // 2、按住遮照鼠标状态变为move状态，绑定移动事件
  120.     // 3、计算进入的时候的当前点的坐标，计算滑动的距离占
  121.     let entryPointX,entryPointY,slideX,slideY;
  122.     // 计算滑动的值
  123.     function computed(ev){
  124.         let offsetX = ev.pageX - currentL - mastH/2,
  125.         offsetY = ev.pageY- currentT - mastW/2;
  126.         // 边界判断
  127.         let minL = 0,
  128.         minT = 0,
  129.         maxL = currentW - mastW,
  130.         maxT = currentH- mastH;
  131.         offsetX  = offsetX < minL ? 0 :  offsetX > maxL? maxL : offsetX;
  132.         offsetY  = offsetY < minT ? 0:  offsetY > maxT? maxT : offsetY;
  133.         setCss(mast,'top', offsetY  + 'px')
  134.         setCss(mast,'left', offsetX  + 'px')
  135.         // 判断目标图片滑动的距离，和mask是相反的倍数关系
  136.         setCss(targetImage,'top', - offsetY*scale  + 'px')
  137.         setCss(targetImage,'left', - offsetX*scale  + 'px')
  138.     }
  140.     currentBox.addEventListener('mouseenter',function(ev){
  141.         setCss(mast,'cursor', 'move')
  142.         setCss(mast,'display', 'block')
  143.         computed(ev)
  144.     })
  145.     currentBox.addEventListener('mousemove',computed)
  146.     currentBox.addEventListener('mouseleave',function(ev){
  147.       setCss(mast,'cursor', 'default')
  148.       setCss(mast,'display', 'none')
  149.     })
  151. </script>
  152. </html>

jQuery版本

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.       .magnifier {
  9.         box-sizing: border-box;
  10.         margin: 20px auto;
  11.         width: 600px;
  12.       }
  14.       .magnifier .abbre,
  15.       .magnifier .origin {
  16.         float: left;
  17.       }
  19.       .magnifier .abbre {
  20.         position: relative;
  21.         box-sizing: border-box;
  22.         width: 250px;
  23.         height: 240px;
  24.       }
  26.       .magnifier .abbre img {
  27.         width: 100%;
  28.         height: 100%;
  29.       }
  31.       .magnifier .abbre .mark {
  32.         display: none;
  33.         position: absolute;
  34.         top: 0;
  35.         left: 0;
  36.         width: 20px;
  37.         height: 10px;
  38.         background: rgba(255, 0, 0, .3);
  39.         cursor: move;
  40.       }
  42.       .magnifier .origin {
  43.         display: none;
  44.         position: relative;
  45.         box-sizing: border-box;
  46.         width: 350px;
  47.         height: 340px;
  48.         overflow: hidden;
  49.       }
  51.       .magnifier .origin img {
  52.         position: absolute;
  53.         top: 0;
  54.         left: 0;
  55.       }
  56.     </style>
  57.   </head>
  58.   <body>
  59.     <section class="magnifier clearfix">
  60.       <!-- 左侧缩略图 -->
  61.       <div class="abbre">
  62.         <img src="images/1.jpeg" alt="">
  63.         <div class="mark"></div>
  64.       </div>
  65.       <!-- 右侧原图(大图) -->
  66.       <div class="origin">
  67.         <img src="images/1.jpeg" alt="">
  68.       </div>
  69.     </section>
  70.     <script src="js/jquery/dist/jquery.min.js"></script>
  71.     <script>
  72.       // 1.等待DOM结构加载完 DOMContentLoaded
  73.       // 2.形成一个闭包,保证私有性
  74.       $(function () {
  75.         let $magnifier = $('.magnifier'),
  76.           $abbre = $magnifier.find('.abbre'),
  77.           $mark = $abbre.find('.mark'),
  78.           $origin = $magnifier.find('.origin'),
  79.           $originImg = $origin.find('img');
  81.         // 首先按照比例计算大图的样式
  82.         let abbreW = $abbre.width(),
  83.           abbreH = $abbre.height(),
  84.           markW = $mark.width(),
  85.           markH = $mark.height(),
  86.           originW = $origin.width(),
  87.           originH = $origin.height(),
  88.           originImgW = null,
  89.           originImgH = null,
  90.           offset = $abbre.offset();
  91.         originImgW = originW / (markW / abbreW);
  92.         originImgH = originH / (markH / abbreH);
  93.         $originImg.css({
  94.           width: originImgW,
  95.           height: originImgH
  96.         });
  98.         // 处理鼠标在ABBRE中进入，离开，移动的相关操作
  99.         function computed(ev) {
  100.           // 计算MARK的位置以及根据MARK的移动计算出大图的移动距离
  101.           let markT = ev.pageY - offset.top - markH / 2,
  102.             markL = ev.pageX - offset.left - markW / 2,
  103.             originImgL = null,
  104.             originImgT = null;
  105.           // 边界判断
  106.           let minL = 0,
  107.             minT = 0,
  108.             maxL = abbreW - markW,
  109.             maxT = abbreH - markH;
  110.           markL = markL < minL ? minL : (markL > maxL ? maxL : markL);
  111.           markT = markT < minT ? minT : (markT > maxT ? maxT : markT);
  112.           originImgL = markL / abbreW * originImgW;
  113.           originImgT = markT / abbreH * originImgH;
  115.           $mark.css({
  116.             left: markL,
  117.             top: markT
  118.           });
  119.           $originImg.css({
  120.             left: -originImgL,
  121.             top: -originImgT
  122.           });
  123.         }
  125.         $abbre.mouseenter(function (ev) {
  126.             $mark.css('display', 'block');
  127.             $origin.css('display', 'block');
  128.             computed(ev);
  129.           })
  130.           .mousemove(computed)
  131.           .mouseleave(function (ev) {
  132.             $mark.css('display', 'none');
  133.             $origin.css('display', 'none');
  134.           });
  135.       });
  136.     </script>
  137.   </body>
  138. </html>