仿京东放大镜_最详解

优快云下载地址：
仿京东放大镜_开箱即用.rar

要点1
限制蓝色遮罩层在小盒子内可移动范围

var left = e.pageX - this.offsetLeft - mask.offsetWidth / 2;
var top = e.pageY - this.offsetTop - mask.offsetHeight / 2;
var smallLeftMax = this.offsetWidth - mask.offsetWidth;
var smallTopMax = this.offsetHeight - mask.offsetHeight;
left = left <= 0 ? 0 : left;
top = top <= 0 ? 0 : top;
left = left >= smallLeftMax ? smallLeftMax : left;
top = top >= smallTopMax ? smallTopMax : top;

蓝色遮罩层可移动的限制条件，等同于把小盒子划分成了9个区域，给定了鼠标经过每个区域时，蓝色遮罩层的 left 和 top值

鼠标在1、4、7区域，left = 0，在3、6、9区域，left = smallLeftMax
在1、2、3区域，top = 0，在7、8、9区域，top = smallTopMax
在2、5、8区域，left = e.pageX - this.offsetLeft - mask.offsetWidth / 2
在4、5、6区域，top = e.pageY - this.offsetTop - mask.offsetHeight / 2

要点2
计算大图跟随蓝色遮罩层的移动公式

大图宽 – 大盒的宽 = 大图left最大移动距离
imgLeft = -left / smallLeftMax * bigLeftMax;
imgTop = -top / smallTopMax * bigTopMax;
注：遮挡层和大图片移动方向相反,所以有负号

要点3
遮挡层 、小图和小盒、大盒、大图 四者的大小关系

	宽	高
遮挡层	200	200
小图和小盒一样大小	450	450
大盒	600	600
大图	1350	1350

600 / 1350 = 200 / 450
满足以上关系才可以使蓝色遮罩层和大盒里的大图在同一个位置

要点4

鼠标经过
1、出现红色边框；

for (var i = 0; i < lis.length; i++) {
            lis[0].className = 'active';
            lis[i].addEventListener('mouseover', function() {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                this.className = 'active';
            })
        }

2、小盒子里面的小图发生变换；
3、大盒子里面的大图发生变换

 for (var i = 0; i < listImg.length; i++) {
            (function(i) {
                listImg[i].addEventListener('mouseover', function() {
                    bigImg.src = 'images/' + [i + 1] + '_big.jpg';
                    smallImg.src = this.src;
                })
            })(i);
        }

实现上面2、3需求，我用到了立即执行函数，不过也可以用let解决，for循环遍历结束只能得到最后一个的问题

for (let i = 0; i < listImg.length; i++) {
    listImg[i].addEventListener('mouseover', function() {
        bigImg.src = 'images/' + [i + 1] + '_big.jpg';
        smallImg.src = this.src;
    })
}

好啦，分享就到这里啦，快去下载试一试，看一看效果吧~