放大镜功能的实现（小图框移动与大图的移动）

左侧放大镜布局搭建

基本布局效果

 

HTML

 

 大图框因为是动态渲染的所以不用写内容

LESS

//中间区域开始
         #center {
            margin: 5px 0 15px;

            //左侧放大镜开始
            #left {
               width: 400px;
               float: left;

               //上边
               #leftTop {
                  width: 400px;
                  position: relative;

                  //小图框
                  #smallPic {
                     width: 400px;
                     height: 400px;
                     border: 1px solid #dfdfdf;
                     position: relative;

                     img {}

                     //蒙版元素
                     .mask {
                        width: 200px;
                        height: 200px;
                        background: rgba(255, 255, 255, .5);
                        border: 1px solid #ddd;
                        position: absolute;
                        left: 0px;
                        top: 0px;
                     }
                  }

                  //大图框
                  #bigPic {
                     width: 400px;
                     height: 400px;
                     border: 1px solid #ddd;
                     left: 420px;
                     top: 0px;
                     position: absolute;
                     overflow: hidden;

                     //大图片
                     img {
                        width: 800px;
                        height: 800px;
                        position: absolute;
                        left: 0px;
                        top: 0px;
                     }
                  }
               }
            }
         }

js

//放大镜的移入、移出效果
   bigClassBind();
   function bigClassBind() {
      /**
       * 思路：
       * 1、获取小图框元素对象，并且设置移入事件(onmouseenter)
       * 2、动态的创建蒙版元素以及大图框和大图片元素
       * 3、移出时(onmouseleave)需要移除蒙版元素和大图框
       */

      //1.获取小图框元素
      var smallPic = document.querySelector('#wrapper #content .contentMain #center #left #leftTop #smallPic');
      //获取leftTop元素
      var leftTop = document.querySelector('#wrapper #content .contentMain #center #left #leftTop');
      //2.设置移入事件
      smallPic.onmouseenter = function () {

         //3. 创建蒙版元素
         var maskDiv = document.createElement('div');
         maskDiv.className = "mask";

         //4.创建大图框元素
         var BigPic = document.createElement('div');
         BigPic.id = "bigPic";

         //5.创建大图片元素
         var BigImg = document.createElement('img');
         BigImg.src = "images/b1.png";

         //6.大图框来追加大图片
         BigPic.appendChild(BigImg);

         //7.让小图框来追加蒙版元素
         smallPic.appendChild(maskDiv);

         //8.让leftTop元素追加大图框
         leftTop.appendChild(BigPic);


         //设置移动事件
         smallPic.onmousemove = function (event) {
            //event.clientX: 鼠标点距离浏览器左侧X轴的值
            //getBoundingClientRect().left:小图框元素距离浏览器左侧可视left值
            //offsetWidth:为元素的占位宽度
            var left = event.clientX - smallPic.getBoundingClientRect().left - maskDiv.offsetWidth / 2;
            var top = event.clientY - smallPic.getBoundingClientRect().top - maskDiv.offsetHeight / 2;

            //判断
            if (left < 0) {
               left = 0;
            } else if (left > smallPic.clientWidth - maskDiv.offsetWidth) {
               left = smallPic.clientWidth - maskDiv.offsetWidth;
            }

            if (top < 0) {
               top = 0;
            } else if (top > smallPic.clientHeight - maskDiv.offsetHeight) {
               top = smallPic.clientHeight - maskDiv.offsetHeight;
            }

            //设置left和top属性
            maskDiv.style.left = left + "px";
            maskDiv.style.top = top + "px";

            //移动的比例关系 = 蒙版元素移动的距离  /  大图片元素移动的距离
            //蒙版元素移动的距离 = 小图框宽度 – 蒙版元素的宽度
            //大图片元素移动的距离 = 大图片宽度 – 大图框元素的宽度

            var scale = (smallPic.clientWidth - maskDiv.offsetWidth) / (BigImg.offsetWidth - BigPic.clientWidth);

            console.log(scale);  //0.495

            BigImg.style.left = -left / scale + "px";
            BigImg.style.top = -top / scale + "px";
         }


         //设置移出事件
         smallPic.onmouseleave = function () {

            //让小图框移除蒙版元素
            smallPic.removeChild(maskDiv);

            //让leftTop元素移除大图框
            leftTop.removeChild(BigPic);
         }
      }
   }