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