放大镜效果在电商网站上较为常见的 一个效果，主要针对鼠标在图片选取部分放大查看。效果如图所示。
image
分析页面可知，页面主要分为三个部分，左侧图片缩略图，鼠标滑动版，右侧原图。
HTML
两个div搞定。smallimg为缩略图，bigimg右侧为原图，slider为鼠标蒙版。
<div class="smallimg">
<img src="001.jpg" alt="">
<div class="slider"></div>
</div>
<div class="bigimg">
<img src="001.jpg" id='srcpic'>
</div>
CSS
要点 定位问题，通过位置，显示右侧原图的部分区域，所谓的放大并不是真的放大，而是只呈现了原图的部分区域。
body{
display: flex;
justify-content: flex-start;
}
.smallimg
{
width: 400px;
position: relative;
}
.smallimg img
{
width: 400px;
}
.slider
{
width: 200px;
height: 200px;
background-color: rgba(255,255,255,.3);
position: absolute;
top:0px;
left:0px;
}
.bigimg
{
width: 400px;
height: 400px;
overflow: hidden;
position:absolute;
left:410px;
}
.bigimg img
{
position:absolute;
}
JS
js 控制滑块位置，及右侧图片显示区域。
window.onload=function()
{
let smallimg=document.getElementsByClassName("smallimg")[0];
let slider=document.getElementsByClassName("slider")[0];
let bigimg=document.getElementsByClassName("bigimg")[0];
let srcpic=document.getElementById("srcpic");
let img= new Image();
img.src=srcpic.src;
let xpect=img.width/smallimg.offsetWidth;
let ypect=img.height/smallimg.offsetHeight;
smallimg.onmouseout=function()
{
slider.style.display="none";
bigimg.style.display="none";
}
smallimg.onmousemove=function(e)
{
slider.style.display="block";
bigimg.style.display="block";
let left=e.clientX-slider.offsetWidth/2;
let top=e.clientY-slider.offsetHeight/2;
//left和top的范围限制，防止滑块划出图片区域
if(left<0)
{
left=0;
}
else if(left>smallimg.offsetWidth-slider.offsetWidth)
{
left=smallimg.offsetWidth-slider.offsetWidth;
}
if(top<0)
{
top=0;
}
else if(top>smallimg.offsetHeight-slider.offsetHeight)
{
top=smallimg.offsetHeight-slider.offsetHeight;
}
slider.style.top=top+'px';
slider.style.left=left+'px';
//按比例实现原图定位。
srcpic.style.top=(-xpect*top)+'px';
srcpic.style.left=(-ypect*left)+'px';
}
}
