Вариант использования:
Пользователь щелкает ссылку, отображается модальное окно, содержащее одно большое изображение, уменьшенное до размера этого окна.Когда пользователь прокручивает колесо мыши вверх или вниз, изображение увеличивается или уменьшается.Изображение увеличивается в любом месте, на которое указывает курсор мыши.
Проблема:
Я не могу обернуть свой мозг вокруг того, как это сделать.
Текущая работа:
При нажатии на ссылку плагин jQuery создает коллекцию «просмотра» HTML-элементов, стилизованных с помощью CSS.Это DIV с абсолютным позиционированием, который содержит IMG-элемент.Изображение масштабируется до 100% ширины.При прокрутке изображение увеличивается на 5% за действие прокрутки.
Поскольку изображение увеличивается при увеличении, содержащий DIV (переполнение: скрытый) будет в конечном итоге обрезать изображение.Изображение можно перетаскивать, чтобы вы всегда могли видеть все его части.
Переменные, которые я храню и знаю:
Коэффициент уменьшения изображения.Размеры изображения до нашего последнего масштабирования.Новые размеры изображения после нашего последнего действия увеличения.Разница в этих двух измерениях.Положение X и Y изображения.Положение X и Y курсора мыши относительно позиционированного контейнера DIV.
Что мне, вероятно, нужно:
Я знаю переменные, которые мне нужны, я просто могупонять, в каком порядке их размещать и какие операторы использовать, когда.Математика никогда не была моей сильной стороной, как и грамматика.Поэтому любая помощь приветствуется.
Исследования выполнены:
Я много гуглил для существующих решений.Большинство из них были реализациями OpenGL или Flash / ActionScript, и ни одна из них не имела для меня никакого смысла.Несколько примеров на основе javascript, которые я нашел, были для коммерческих целей, и даже тогда их исходный код был запутан или минимизирован, и я не мог полностью извлечь внутреннюю работу для этой маленькой функции.
Кроме того, я, вероятно,также не найдены правильные слова для поиска.