Алгоритм увеличения изображения при mousewheel

190
07 марта 2019, 03:30

Подскажите пжл алгоритм увеличение картинки к точке, в зависимости от курсора мыши над этой картинкой. Не могу понять как вычислить дельту на которую нужно смещать картинку

Answer 1

const imageEl = document.getElementById("image"); 
 
image.addEventListener("mousewheel", (event) => { 
  const el = event.target; 
  const match = (el.style.transform || "").match(/[\d.]+/); 
  const curr = (match && +match[0]) || 1; 
  const diff = (-event.deltaY)/3000; 
  el.style.transform = `scale(${diff + curr})`; 
  el.style.transformOrigin = `${event.offsetX}px ${event.offsetY}px`; 
})
img { 
  width: 200px; 
  height: 200px; 
  margin: 20px; 
}
<img id ="image" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0MDguNzg4IDQwOC43ODgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwOC43ODggNDA4Ljc4ODsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIHN0eWxlPSJmaWxsOiM0NzU5OTM7IiBkPSJNMzUzLjcwMSwwSDU1LjA4N0MyNC42NjUsMCwwLjAwMiwyNC42NjIsMC4wMDIsNTUuMDg1djI5OC42MTZjMCwzMC40MjMsMjQuNjYyLDU1LjA4NSw1NS4wODUsNTUuMDg1aDE0Ny4yNzVsMC4yNTEtMTQ2LjA3OGgtMzcuOTUxYy00LjkzMiwwLTguOTM1LTMuOTg4LTguOTU0LTguOTJsLTAuMTgyLTQ3LjA4N2MtMC4wMTktNC45NTksMy45OTYtOC45ODksOC45NTUtOC45ODloMzcuODgydi00NS40OThjMC01Mi44LDMyLjI0Ny04MS41NSw3OS4zNDgtODEuNTVoMzguNjVjNC45NDUsMCw4Ljk1NSw0LjAwOSw4Ljk1NSw4Ljk1NXYzOS43MDRjMCw0Ljk0NC00LjAwNyw4Ljk1Mi04Ljk1LDguOTU1bC0yMy43MTksMC4wMTFjLTI1LjYxNSwwLTMwLjU3NSwxMi4xNzItMzAuNTc1LDMwLjAzNXYzOS4zODloNTYuMjg1YzUuMzYzLDAsOS41MjQsNC42ODMsOC44OTIsMTAuMDA5bC01LjU4MSw0Ny4wODdjLTAuNTM0LDQuNTA2LTQuMzU1LDcuOTAxLTguODkyLDcuOTAxaC01MC40NTNsLTAuMjUxLDE0Ni4wNzhoODcuNjMxYzMwLjQyMiwwLDU1LjA4NC0yNC42NjIsNTUuMDg0LTU1LjA4NFY1NS4wODVDNDA4Ljc4NiwyNC42NjIsMzg0LjEyNCwwLDM1My43MDEsMHoiLz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48L3N2Zz4=" />

Как то так, только подумайте над оптимизацией

READ ALSO
Вернуть n массивов

Вернуть n массивов

Есть массив данных в котором может находиться не ограниченное кол-во объектовХочу написать функцию которая будет возвращать каждые 10 элементов...

163
поиск в базе по параметрам

поиск в базе по параметрам

ребят, есть 2 таблицы, в 1ой юзер устанавливает для себя теги, во 2ой вывод новостей (с определенными тегами), если какой то из тегов найдет у юзера...

139
теги новости на сайте

теги новости на сайте

хочу при создания новости, на сайте, добавлять к ней тегиПользователь который зарегистрировался выбирает теги, которые ему интересны

163
Отправка потока getUserMedia на сервер Node js

Отправка потока getUserMedia на сервер Node js

Задача: отправить видеопоток с вэбки клиента на серверКод клиента:

181