用javascript实现放大镜效果_javascript技巧_

.preview_wrap {       width: 400px;       height: 590px;             }   .preview_img {       position: relative;       height: 398px;       border: 1px solid #CCCCCC;       background-color: pink;text-align: center;                              }   .preview_img .smallImg {       margin-top: 25%;       width: 200px;             }   .mask {         display: none;         position: absolute;         top: left: 0;         width: 300px;         height: 300px;         background-color: yellow;        opacity: .5;        border: 1px solid #CCCCCC;         cursor: move;  }   .big {        display: none;        position: absolute;        left: 410px;        top: 0;        width: 500px;        height: 500px;        z-index: 999;        border: 1px solid #ccc;        overflow: hidden; } .big img {        position: absolute;        top: 0;        left: 0; }

// 整个案例可以分为三个功能模块 // 鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能 // 黄色的遮挡层跟随鼠标功能。 // 移动黄色遮挡层，大图片跟随移动功能。   // 1.鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能 // 就是显示与隐藏   // 当页面全部加载执行完毕后再执行js代码 window.addEventListener('load', function() {             var preview_img = document.querySelector('.preview_img');             var mask = document.querySelector('.mask');             var big = document.querySelector('.big');               //2.当我们鼠标经过 preview_img 就显示和隐藏mask遮挡层和 big 大盒子             preview_img.addEventListener('mouseover', function() {                 mask.style.display = 'block';                 big.style.display = 'block';             })             preview_img.addEventListener('mouseout', function() {                 mask.style.display = 'none';                 big.style.display = 'none';             })               // 黄色的遮挡层跟随鼠标功能。             // 把鼠标坐标给遮挡层不合适。因为遮当层坐标以父盒子为准。             // 首先是获得鼠标在盒子的坐标             // 之后把数值给遮挡层做为left和top值。             // 此时用到鼠标移动事件，但是还是在小图片盒子内移动。               // 2.鼠标移动的时候,让黄色的盒子跟着鼠标来走             preview_img.addEventListener('mousemove', function(e) {                 //(1).先计算出鼠标在盒子里的坐标                 // 先算出鼠标在页面中的坐标,减去盒子距离左侧的距离,就是鼠标在盒子里的坐标                 // 但是这里要注意:                 // 要看他有没有父元素,并且父元素有没有定位                   var x = e.pageX - this.offsetLeft;                 var y = e.pageY - this.offsetTop;                 // console.log(x,y)                 //(2)盒子高度 300的一半 150                 // (3)mask移动的距离                 var maskX = x - mask.offsetWidth / 2;                 var maskY = y - mask.offsetHeight / 2;                   // (4)遮挡层不能超出小图片盒子范围                 // 如果小于0,就把坐标设置为0                   //遮挡层的最大一定距离,因为都是正方形,所以高也适用                 var maskMax = preview_img.offsetWidth - mask.offsetWidth;                 if (maskX <= 0) {                     maskX = 0                     //如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离                     //遮挡层的最大移动距离:小图片盒子宽度减去遮挡层盒子宽度                 } else if (maskX >= maskMax) {                     maskX = maskMax;                 }                 if (maskY <= 0) {                     maskY = 0;                     //如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离                     //遮挡层的最大移动距离:小图片盒子宽度减去遮挡层盒子宽度                 } else if (maskY >= maskMax) {                     maskY = maskMax;                 }                   mask.style.left = maskX + 'px';                 mask.style.top = maskY + 'px';                     // 移动黄色遮挡层, 大图片跟随移动功能                 // 求大图片的移动距离公式:                 //     遮挡层移动距离 / 遮挡层最大移动距离 = 大图片移动距离 / 大图片最大移动距离                 // 3.大图片的移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层的最大移动距离                 var bigImg = document.querySelector('.bigImg'); //大图                 //大图片最大移动距离                 var bigMax = bigImg.offsetWidth - big.offsetWidth;                 //大图片最大移动距离                 var bigX = maskX * bigMax / maskMax;                 var bigY = maskY * bigMax / maskMax;                 bigImg.style.left = -bigX + 'px';                 bigImg.style.top = -bigY + 'px';             })    })