Что мы получаем, если img.clientHeight / 100 и img.clientWidth / 100?

Question

[olya_097]

https://codepen.io/anon/pen/LqgBjE
28 и 29 строки

Answer 1

[Dima Polos]

Высоту и ширину в процентах.

Comments

[olya_097]

Dima Polos, а что тогда получается после этого?
arr[1] / (el.clientHeight / 100)?
arr[0] / (el.clientWidth / 100)

непонятна разница между этим выше и
el.clientHeight / 100
el.clientWidth / 100?

[Dima Polos]

olya_097, функция вызывается с массивом из двух параметров, первый это отступ от верхнего левого угла по вертикали, а второй элемент это отступ по горизонтали.

[olya_097]

Dima Polos, имеется ввиду, что в данном случае heigthPercent и widthPercent - это отступы от верхнего левого угла по вертикали и по горизонтали в % ?

[Dima Polos]

olya_097, да, и на эти проценты сдвигается маленькая картинка при движении мышки над большой, так и получается эффект зума.

[olya_097]

Dima Polos, но один нюанс не совсем ясен
почему тут heigthPercent = arr[1] / (el.clientHeight / 100)

а не к примеру heigthPercent = (arr[1] / el.clientHeight) / 100 ?

[Алексей]

olya_097, вообще здесь вычисляется смещение фона у окошка-лупы, а не какие-то размеры.
И логичнее, если бы было написано так:

// В скобка высчитывается доля координат курсора относительно размеров картинки (0...1)
// Затем умножается на 100, чтобы получились проценты.
shiftXpercent = (arr[0] / el.clientWidth) * 100;
shiftYpercent = (arr[1] / el.clientHeight) * 100;

[Dima Polos]

Алексей, , да, я тоже смотрю и как-то нелогично написан код, но суть вычислений это смещение фона в процентах.@olya_097

[Dima Polos]

olya_097, я солидарен с ответом выше.
Давайте обратимся к алгебре, забудем про код.
Если мы а делим на b, то это тоже самое, что а умножить на число обратное b, то есть 1/b.
Тепрь посмотрим на такое:
a делим на b и делим все это на c, это тоже самое, что a поделить на дробь b/c. Деление это умножение на обратное число, в данном случае это a умножить на c/b.
Как умножить дроби? Нужно числители перемножить и перемножить знаменатели под одной общей дробью, которая заменяет знак деления.
Вернемся к примеру выше, arr[0] / (e.clientWidth / 100).
arr[0] заменим на a, e.clientWidth на b.
Итого, условие:
1) a / ( b / 100 ).
2) a * 100 / b.
3) a / b * 100.
Если два числа поделить друг на друга и умножить на 100 получим сколько в процентах числитель составляет от знаминателя.
PS писатель кода везунчик, ему повезло, что в итоге получается как надо, но код написан, как по мне, криво.

[olya_097]

Алексей, Dima Polos , ок
спасибо
но не совсем понятно почему именно такая формула?
shiftXpercent = (arr[0] / el.clientWidth) * 100; ?

получается мы делим координату клика по оси Х на ширину элемента вместе+с его паддингами? или как?

[Dima Polos]

olya_097, ну да, все так, а что смущает?

[Dima Polos]

olya_097, видимо паддингов у элемента нет, поэтому clientWidth и есть ширина элемента

[olya_097]

Dima Polos, не совсем понимаю
почему не наоборот? (el.clientWidth/ arr[0] ) * 100 ?
извиняюсь, если странный вопрос
просто хочу до конца понять

[Dima Polos]

olya_097, мы сместили мышку влево на 10px, сколько это в процентах от всего элемента, если весь элемент, например, 200px?
(10/200) * 100% = 0.05 * 100%, или 5% Если мы 200 поделим на 10, то получим сколько процентов вся ширина элемента составит от того на сколько подвинули мышку. Нам надо узнать на сколько мышка подвинулась, и на столько же сместить мелкую картинку. Поэтому arr[0] / e.clientWidth.

[olya_097]

Dima Polos, спасибо!

[Dima Polos]

olya_097, ответ на вопрос дан правильный?)

[Dima Polos]

olya_097, всегда пожалуйста!

[olya_097]

Dima Polos, да, супер
отметила решением
еще раз спасибо

[olya_097]

Dima Polos,
var sizes=getSizes(metrics, event);
out.style.backgroundPosition=sizes;

sizes -это как раз насколько мы сместили элемент?

[Dima Polos]

olya_097, это как бы да, но если точнее это уже целое CSS правило, составленное из результатов рассчетов.

[olya_097]

Dima Polos, точно)