Как отобразить изображение в фиксированном div, чтобы сделать прокручиваемую панель изображений?

Question

Я делаю скрипт фотогалереи, который включает отображение изображения в окне с фиксированной шириной / высотой. Теперь я хочу, чтобы это изображение отображалось в полном размере. Я имею в виду, что если поле имеет размер 700x300 пикселей, размер изображения не должен изменяться до 700x300, а должно отображаться в своем полном разрешении. также, если это возможно, могу ли я как-то заставить его перетаскиваться в поле, чтобы его можно было просмотреть полностью?

любая помощь будет оценена.

Answer 1

Для создания перетаскиваемой панели вам понадобятся два элемента: внешний div, который будет действовать как контейнер, и внутренний div, который будет действовать как «холст». Внешний контейнер должен иметь свой стиль, установленный на overflow: hidden.

<div id="drag-container">
    <div id="drag-canvas"><img></div>
</div>

Далее вам нужно сделать внутренний холст перетаскиваемым. На внутреннем mouseDown вызовите функцию, которая устанавливает переменную dragging = true. На mouseUp вызовите функцию, которая устанавливает ее на false. Вы также захотите сохранить положение мыши на mouseDown и вычесть верхнюю и левую позиции внутреннего делителя, чтобы использовать его в качестве смещения.

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

Есть также несколько библиотек, таких как JQuery UI , в которых есть «перетаскиваемый» метод, который можно напрямую применить к div, что упрощает этот процесс. Настоящий ключ - установить внешний контейнер со скрытым переполнением.