js-实现放大镜效果

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第32天，点击查看活动详情

前言

我们在逛商城网站的时候会经常看见一个功能，图片放大镜的效果，今天就来实现这个图片放大镜的效果

实现放大镜效果

html加入一个div设置id为#image，css部分添加#image选择器，将div的宽高都设为300，将要显示的图片通过background-image设定为背景图片，由于要做放大镜的效果，这个背景图片的大小要大于容器的大小，例如放大镜放大三倍，那么图片的大小就是900 * 900，然后通过background-size将它设回300 * 300的大小

<div id="image"></div>

body{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#image{
  width: 300px;
  height: 300px;
  background-color: #000;
  background-image: url('https://placekitten.com/900/900');
  background-size: 300px 300px;
  background-repeat: no-repeat;
}

那如何实现当鼠标移入图片的时候将图片放大呢？在js部分加入三个事件监听器，第一个是mouseenter，会在鼠标进入图片时触发，第二个是mousemove，会在鼠标在图片上移动时触发，第三个是mouseleave，会在鼠标离开图片时触发

document.querySelector('#image').addEventListener('mouseenter',enterHandler)
document.querySelector('#image').addEventListener('mousemove',moveHandler)
document.querySelector('#image').addEventListener('mouseleave',leaveHandler)

function enterHandler(e){}
function moveHandler(e){}
function leaveHandler(e){}

先处理鼠标进入图片时放大，离开时缩小回原来的大小，在enterHandler函数里加入e.target.setAttribute()，将zoomed设为1，这样相当于在div上加入zoomed="1"这个属性

function enterHandler(e){
  e.target.setAttribute('zoomed',1)
}

然后在leaveHandler加入e.target.removeAttribute()将zoomed属性移除

function leaveHandler(e){
  e.target.removeAttribute('zoomed')
}

css部分加入 #image[zoomed]选择器，代表当#image有zoomed这个属性的时候将background-size设定为3倍的大小即900 * 900

#image[zoomed]{
  background-size: 900px 900px;
}

现在鼠标移到图片上就放大了，再来处理鼠标在图片上移动的情况，在moveHandler函数里定义两个变量x和y，然后计算出鼠标移到图片上的x方向百分比和y方向的百分比

位移的值可以通过offsetX和offsetY获取，再除以容器的宽高就可以得到百分比了

function moveHandler(e){
  let rect=e.target.getBoundingClientRect()
  let x=e.offsetX / rect.width
  let y=e.offsetY / rect.height
}

再通过e.target.style.setProperty分别将x和y设为css的变量，这样就能在css里获取到x和y的值

function moveHandler(e){
  e.target.style.setProperty('--x',x)
  e.target.style.setProperty('--y',y)
}

通过控制台就可以看见css变量的值了

最后#image[zoomed]选择器加上background-position控制背景图片的位置，x的值为var(--x) * 100%，外层套上calc(),y的值同x的值一样设定

#image[zoomed]{
  background-size: 900px 900px;
  background-position: calc(var(--x) * 100%) calc(var(--y) * 100%);
}

这样就实现了放大镜的效果了