Повертання зображення (картинки) на jQuery

Бажаємо запропонувати Вам для огляду дуже корисний плагін для обертання картинок -jQueryRotate. Завантажити цей плагін Ви можете з нашого сайту за посиланнямjQueryRotate.2.2.js.

Даний плагін дозволить Вам реалізувати на своєму сайті поворот зображення (картинки) на кут. Також за необхідності можна задати динамічне обертання будь-якому зображенню (картинці).

Для прикладу роботи плагінаjQueryRotateзверніть увагу на три зображення, що знаходяться трохи нижче:

картинки
картинки

зображення
jquery

Як бачите, перше та третє зображення при завантаженні автоматично було повернено на 45 градусів. Друге при наведенні на нього курсора мишки повертається на 90 градусів. А четверте зображення постійно обертається.

Для роботи плагіна, що реалізує поворот зображень, Вам потрібно підключити бібліотекуjQueryі сам плагін jQueryRotate таким чином:

Як бачите, Вам зовсім не обов'язково завантажувати цей плагін собі на сайт, т.к. його можна завантажувати з серверів Google.

Зображення, до яких Ви плануєте застосувати поворот або динамічне обертання, слід описувати так:

Після того, як потрібні Вам зображення додані і присвоєні потрібні id або class, можна додавати і сам скрипт, який здійснюватиме поворот зображень (картинок) відповідно до заданих параметрів.

script type = "text/javascript" > $( document ). ready (function() jQuery (".rotate1"). rotate (45);

var angle = 0; setInterval (function() angle += 3 ; jQuery ( "#rotate3" ). rotate ( angle ); >, 90 ); >);

Як Ви бачите, можна звертатися до картинок за їх ID, а можна застосовувати обертання відразу і до цілого класу. Для того, щоб повернутизображення проти годинникової стрілки, достатньо зазначити негативне значення.