Создайте несколько кастрюль изображений jQuery на 1 странице

Question

Существует замечательный сценарий Manos, который позволяет панорамировать обрезанное изображение при наведении на него. Вот code и вот demo

Что бы я хотел сделать, это разместить несколько изображений на 1 странице с различными размерами для каждого изображения. (Я попытался создать JSfiddle для этого, но не работал хорошо)

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

Большое спасибо за внимание.

Answer 1

Вместо использования глобального $imagePan измените функцию MouseMove, чтобы принять изображение в контексте, и вместо использования идентификаторов вы должны использовать классы.

http://jsfiddle.net/VPr52/9/

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

Удачи вам!