css - 使用 CSS 放大以光标为中心的图像

Question

我有一张 map 图片，我想在点击它时放大/缩小。下面的代码将它放大，但我想放大以光标位置为中心的图像并使水平滚动出现。我如何仅使用 CSS 来做到这一点？

CSS

input[type=checkbox]{
    display: none;
}

.container img{
    transition: transform 0.25s ease;
    cursor: zoom-in;
}

input[type=checkbox]:checked ~ label > img{
    -webkit-transform: scale(2);
    transform: scale(2);
    cursor: zoom-out;
}

HTML

<div class="container"><input id="zoomCheck" type="checkbox" />
<label for="zoomCheck">
<img src="map.jpg" />
</label></div>

Answer 1

我为您创建了您可以使用的逻辑。只需添加其他功能即可。

基本上，这就是您想要的。

fiddle :https://jsfiddle.net/zpobnetf/11/

如何实现？

1. 获取点击位置(clientX, clienY)

2. 将图像克隆到带有背景图像的 div(单击图像的 src)

3. 根据点击的位置定位它们。

正如您在我的示例中看到的那样。我将 clientX 和 clientY 减去 75。这是因为我创建的框的大小为 150x150。我只是将它除以 2。因此，我可以将 #box 放在中心。

希望你能明白。干杯!你能行的。只要相信!

let mapa = document.getElementById('map'),
	box = document.getElementById('box');

mapa.addEventListener('click', (e) => {
	let xPos = (e.clientX - 75),
  	yPos = (e.clientY - 75);
    
  box.style.display = 'initial';
  box.style.top = `${yPos}px`;
  box.style.left = `${xPos}px`;
  box.style.backgroundPosition = `-${xPos}px -${yPos}px`;
});

#box {
  height: 150px;
  width: 150px;
  background: rgba(255,255,255,0.8);
  background-image: url('https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png');
  background-repeat: no-repeat;
  transform: scale(1.4);
  position: absolute;
  display: none;
}

<img id="map" src="https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png">

<div id="box"></div>