Question

我有一张地图图片，我想在点击它时放大/缩小。下面的代码对其进行缩放，但我想放大以光标位置为中心的图像并进行水平滚动。如何使用仅限CSS ？

CSS

  $scope.optionChanged = function () {
     Main.getFile( $scope.selectedjsoncontent )
         .success(function(result){
           $scope.textAreaData = result;
         });

HTML

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

Answer 1

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

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

小提琴：https://jsfiddle.net/zpobnetf/11/

你怎么能实现它？

获取点击位置（clientX，clienY）
将图像克隆为带有背景图像的div（单击图像的src）
根据点击的位置定位它们。

正如你在我的例子中看到的那样。我将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>

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

1 个答案: