Как с помощью jQuery правильно панорамировать изображение больше, чем его контейнер?

Я создаю довольно классную программу просмотра изображений, но застрял в одной конкретной части: панорамирование изображения при увеличении. Это кажется тривиальной проблемой, и я ' Я испробовал почти все ответы на похожие вопросы по SO, но каждый раз что-то не работает. Мне нужна пара свежих глаз.

Я временно открыл URL-адрес на моем сервере разработки. Взгляните на эту страницу:

[URL закрыт]

Затем переместите колесико мыши вверх, чтобы активировать масштабирование. Мы здесь. После увеличения щелкните и перетащите, чтобы попытаться панорамировать изображение. Панорамирование идет нормально, но что-то не так. В настоящее время для панорамирования используется следующий код:

var clicking = false;
var previousX;
var previousY;

$("#bigimage").mousedown(function(e) {

    e.preventDefault();
    previousX = e.clientX;
    previousY = e.clientY;
    clicking = true;
});

$(document).mouseup(function() {
    clicking = false;
});

$("#bigimage").mousemove(function(e) {

    if (clicking) {
        e.preventDefault();
        var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
        var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
        $("#bigimage").scrollLeft($("#bigimage").scrollLeft() + 10 * directionX);
        $("#bigimage").scrollTop($("#bigimage").scrollTop() + 10 * directionY);
        previousX = e.clientX;
        previousY = e.clientY;
    }
});

Решение, которое я ищу, имеет следующие характеристики:

  • Правильное направление панорамирования по осям X и Y
  • Не должно быть возможности панорамирования за пределами краев. изображения
  • Достаточно плавное панорамирование
  • Приятно иметь: изменение размера окна не должно вызывать никаких проблем

Хотя я ценю любую помощь, которую могу получить, пожалуйста, не указывайте мне на общий плагин, я пробовал слишком много из них, что я ищу ответ, который работает для моего конкретного сценария. Я в таком отчаянии, что даже назначил денежное вознаграждение за идеальное решение, отвечающее указанным выше характеристикам.

PS: Пожалуйста, попробуйте ссылку в Firefox или браузере Webkit

8
задан Community 18 July 2018 в 06:04
поделиться