html|仿京东的图片放大镜案例 javascript|css3|前端

一、目标实现效果

文章图片

在左边的小图片上实现鼠标经过右边显示图片的放大图片
二、实现过程及其思路展示
1、给鼠标设置一个'mouseover'事件在鼠标经过的时候可以将遮罩层和右边的放大图片显示设置为块级显示（页面加载时这两个为none也就是隐藏的状态），再给鼠标设置一个'mouseout',在鼠标超出图片所在范围的时候再将上面的两个属性的display设置为none，再次隐藏起来。
2、鼠标添加'mousemove'事件，再鼠标移动的时候给遮罩层赋予一个坐标跟随鼠标的移动而移动，而且需要在此时给右边的被放大的盒子添加位置（但是左右两边的位移是相反的，需要特别注意，只需要给鼠标产生位移的距离添加'-'号就行了）。
3、实现的过程中还有很多的小细节，由于我不是大神，所以说不能面面俱到，所以直接上代码，可以在实践中寻找经验，体验代码之美。
代码如下：
1、js代码段，此处需要单独创建一个js文件，并且调用到html的head中（由于还是小白阶段，所以暂时没有写注释，有不懂的可以私信问我，虽然那我也不一定会哈哈哈哈）

window.addEventListener('load', function () { var mask = this.document.querySelector('.mask'); var bigImg = this.document.querySelector('.big_img'); var smallImg = this.document.querySelector('.small_img'); var magnifier = this.document.querySelector('.magnifier'); var imgLeft = this.document.querySelector('#small'); var imgRight = this.document.querySelector('#big'); magnifier.addEventListener('mouseover', function () { mask.style.display = 'block'; bigImg.style.display = 'block'; smallImg.addEventListener('mousemove', function (e) { var x = e.pageX - smallImg.offsetLeft; var y = e.pageY - smallImg.offsetTop; var maskLeft = x - mask.offsetWidth / 2; var maskTop = y - mask.offsetHeight / 2; // 此处忘记给smallImg的源对象添加宽度和高度，导致遮罩层显示出现错误 var ssTop = smallImg.offsetWidth - mask.offsetWidth; if (maskLeft <= 0) { mask.style.left = '0'; } else { mask.style.left = maskLeft + 'px'; } if (maskTop <= 0) { mask.style.top = '0'; } else { mask.style.top = maskTop + 'px'; } if (maskTop >= ssTop) { mask.style.top = ssTop + 'px'; } if (maskLeft >= ssTop) { mask.style.left = ssTop + 'px'; } // 定义一个倍数关系，联系到与被放大的图像 var bb = imgRight.offsetWidth / imgLeft.offsetWidth; imgRight.style.top = -bb * maskTop + 'px'; imgRight.style.left = -bb * maskLeft + 'px'; }); }) magnifier.addEventListener('mouseout', function () { mask.style.display = 'none'; bigImg.style.display = 'none'; })})

2、html页面，由于html的页面较为简便，所以说是将css文件也写到了这里（同样没有注释哦）

模仿京东的放大镜效果* { margin: 0; padding: 0; }.magnifier { position: relative; height: 450px; width: 450px; }.small_img { position: absolute; height: inherit; width: inherit; top: 0; left: 0; z-index: 1; }.mask { display: none; position: absolute; left: 0; top: 0; height: 300px; width: 300px; background-color: rgb(223, 223, 80); /* 设置盒子的透明度 */ opacity: .5; cursor: move; z-index: 999; }.big_img { display: none; position: absolute; top: 0; left: 500px; height: 600px; width: 600px; overflow: hidden; }#small { position: absolute; top: 0; left: 0; }#big { position: absolute; top: 0; left: 0; } 文章图片文章图片