jQueryRotate — крутим картинки

Плагин jQueryRotate позволяет поворачивать картинки (img) на заданный угол. Реализован как статический поворот, так и динамическое вращение.

По заверениям разработчиков, для современных браузеров используются CSS3-свойства и их вендорные аналоги, для старых браузеров используется рисование на канве или VML.

Демо-пример.

Проверено в:

• IE 6-9
• Firefox 3+
• Opera 9+
• Safari
• Chrome

Что качать?

• библиотеку jquery качаем или подключаем из хранилища.
• jqueryrotate.2.1.js (10.69 Kb) — собственно плагин.

Быстрый старт

Подключаем библиотеки:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jqueryrotate.2.1.js"></script>

Как-либо выделяем картинку, которую будем вращать. Например, присваиваем id.

<img src="img/pic1.jpg" height="200" width="200" alt="" id="rotateImg"/>

Даем команду на поворот на 45 градусов:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#rotateImg").rotate(45);
});
</script>

А теперь подробнее

Итак, управление вращением происходит с помощью функции rotate(). Результат вращения определяется переданными ей параметрами.

Собственно, есть два варианта:

1. Вещественное число (как в примере выше) — угол в градусах, на который повернется картинка. Положительное число — поворот по часовой стрелке, отрицательное — против.
2. Объект, содержащий параметры вращения.

Параметры вращения:

Примеры

Поворот с использованием числового параметра и объекта (результат одинаков):

<script type="text/javascript">
jQuery("#rotateImg").rotate(45);

jQuery("#rotateImg").rotate({angle:45});
</script>

Поворот по наведению/убиранию мыши:

<script type="text/javascript">
jQuery("#rotateImg").rotate({ 
   bind: 
     { 
        mouseover : function() { 
            jQuery(this).rotate({animateTo:180})
        },
        mouseout : function() { 
            jQuery(this).rotate({animateTo:0})
        }
     } 
});
</script>

Постоянное вращение с использованием таймера:

<script type="text/javascript">
var angle = 0;
setInterval(function(){
      angle+=3;
     jQuery("#rotateImg").rotate(angle);
},50);
</script>

Постоянное вращение c использованием рекурсивного вызова функции:

<script type="text/javascript">
var rotation = function (){
   jQuery("#rotateImg").rotate({
      angle:0, 
      animateTo:360, 
      callback: rotation
   });
}
rotation();

Вращение контента

Для нормальных современных браузеров плагин позволяет вращать не только картинки, но и другой обычный контент. Хотя красота отображения повернутых шрифтов в некоторых браузерах оставляет желать лучшего.

В старых версиях браузеров плагин, как минимум, не сможет повернуть не img (например IE7 лично у меня вообще повис наглухо).

Помни! Разработчики позиционируют свое детище именно, как плагин для поворота картинок. Только в этом случае гарантируется кроссбраузерность.

Материал:

• jquery plugin :: jqueryrotate

По теме:

• jquery.flip — плагин для переворота контента
• Текст под углом
• Вертикальный текст на CSS
• IE’s CSS3 Transforms Translator