Блог

У меня есть изображение карты, и я хочу увеличивать / уменьшать масштаб при нажатии на него. Этот приведенный ниже код увеличивает его, но я хочу увеличить изображение по центру вокруг местоположения курсора и отобразить горизонтальную прокрутку. Как я могу сделать это только с помощью 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>
  

Я создал для вас логику, которую вы можете использовать. Просто добавьте другие функции.

В принципе, это то, что вы хотите.

Скрипка: https://jsfiddle.net/zpobnetf/11 /

Как вы можете этого добиться?

1. Получить положение щелчка (clientX, clienY)

2. Клонируйте изображение в div с фоновым изображением (src изображения щелкнул)

3. Расположите их в зависимости от позиции, на которую был нажат.

Как вы можете видеть на моем примере. Я вычитаю clientX и clientY на 75. Это потому, что поле, которое я создал, имеет размер 150×150. Я просто делю его на 2. Таким образом, я могу расположить поле # в центре.

Надеюсь, вы поняли. Ура! Вы можете это сделать. Просто верьте!

 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>