Как правильно панорамировать изображение, превышающее его контейнер, с помощью jQuery? - PullRequest
8 голосов
/ 06 ноября 2011

Я создаю довольно крутой просмотрщик изображений, но застрял в одной конкретной части: панорамирование изображения при увеличении. Это кажется тривиальной проблемой, и я опробовал почти все ответы на подобные вопросы в 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

Ответы [ 2 ]

10 голосов
/ 11 ноября 2011

Я собрал jsFiddle, который делает то, что, я думаю, вы хотите, чтобы он делал.

http://jsfiddle.net/CqcHD/2/

Он удовлетворяет всем 4 вашим критериям.Дайте мне знать, если я неверно истолковал ваш ожидаемый результат

0 голосов
/ 27 февраля 2014

У меня есть несколько альтернативных плагинов для вашей работы. попробуйте среди этих плагинов jquery.

http://kvcodes.com/2014/02/jquery-plugins-for-containerdiv-zoom/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...