Вы находитесь на устаревшей версии сайта romka.eu. Она оставлена здесь на случай если я захочу поностальгировать по тому как выглядел интернет в 2012 году :) Так этот сайт выглядел с июня 2012 по февраль 2023. Эта версия сайта не обновляется, комментирование материалов отключено. Обновленная версия сайта доступна по адресу http://romka.eu.

Вращение изображений при помощи Javascript

Submitted by Ромка on Ср, 04/03/2009 - 14:45

Ромка аватар
Довольно давно я задумался о решении такой задачки: необходимо при помощи ява-скрипта поворачивать картинку на заданный угол. Сейчас нашел её решение — плагин wilq32 для jQuery, позволяющий как просто поворачивать картинки, так и создавать анимированное вращение:


Использовать плагин предельно просто, он реализует две функции rotate и rotateAnimation, которые принимают ряд параметров, детально описанных в документации. Например, для поворота изображения достаточно использовать код: $('#image').rotate(-25); где "#image" — id изображения, которое мы хотим повернуть, а -25 — угол поворота.

Немного более сложный пример. Поворачиваем изображение при наведении на него курсора мышки и возвращаем его в исходное состояние, когда курсор не находится над изображением: var rot=$('#image3').rotate({ bind: [ { "mouseover": function() { rot.rotateAnimation(35); } }, { "mouseout": function() { rot.rotateAnimation(0); } } ] });
Скачать плагин можно на сайте автора. В комментариях к плагину приведены примеры его использования.

К сожалению, на данный момент, плагин может глючить в IE, но автор обещает исправить эту недоработку к релизу плагина (пока доступна версия 0.5). Версию этого плагина для библиотеки mootools можно найти тут: http://www.piksite.com/mRotate/.

Обновление. Несколько дней назад стала доступна версия 0.7 плагина. В ней немного изменился метод вызова анимации, а также исправлены глюки из-за которых плагин не работал в Internet Explorer.

13 Comments

на данной странице не

Submitted by pinnokio (не проверено) on

на данной странице не работает, а в примерах автора все отлично работает: и в опере, и в ИЕ, и хроме, и в мазилле.

качество

Submitted by Anonymous (не проверено) on

В опере качество ухудшается.. А в ИЕ отличное, правда у меня идет смещение картинки вправо, но это легкопоправимо.. Никто не подскажит что можно с качеством придумать?..

В Firefoxe теряется позиция

Submitted by pablobablo (не проверено) on

Плагин хороший, но если картинку позиционировать абсолютно, то в Firefox эта позиция теряется в то время, когда запускается ротация. Надеюсь, что автор этого плагина исправит такую досадную ошибку.

thanx

Submitted by ray (не проверено) on

спасибо, толково