JS学习笔记|JS实现放大镜效果

放大镜效果在电商网站上较为常见的 一个效果，主要针对鼠标在图片选取部分放大查看。效果如图所示。

image

分析页面可知，页面主要分为三个部分，左侧图片缩略图，鼠标滑动版，右侧原图。

HTML

两个div搞定。smallimg为缩略图，bigimg右侧为原图，slider为鼠标蒙版。

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';

}

}