Как правильно панорамировать изображение больше контейнера с помощью jQuery?
Я создаю довольно классный просмотрщик изображений, но застрял в одной конкретной части: панорамирование изображения при увеличении. Это кажется тривиальной проблемой, и я пробовал почти все ответы на подобные вопросы на SO, но каждый раз что-то работает неправильно. Мне нужна свежая пара глаз.
Я временно открыл URL-адрес на моем dev-сервере. Взгляните на эту страницу:
[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 ответов
Я собрал jsFiddle, который делает то, что я думаю, что вы хотите, чтобы он сделал.
он удовлетворяет всем 4 Критериев. Дайте мне знать, если я неправильно истолковал ваш ожидаемый результат
У меня есть несколько альтернативных плагинов для вашей работы . попробуйте среди этих плагинов jquery.
http://kvcodes.com/2014/02/jquery-plugins-for-containerdiv-zoom/