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

Автор: Александр Головко Дата публикации: 09.11.2011

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

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

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

Проверено в:

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

Что качать?

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

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

<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. Объект, содержащий параметры вращения.

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

Название параметра Описание Значение по-умолчанию
angle Угол мгновенного поворота в градусах. 0
animateTo Угол анимированного плавного поворота в градусах. 0
duration Длительность анимации поворота при использовании animateTo, мс. 1000
easing При использовании плагина jQuery Easing, можно задать неравномерное вращение.
bind Объект, содержащий события, при которых необходимо вращение картинки.
callback Функция, вызывающаяся после завершение анимации.

Примеры

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

<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 лично у меня вообще повис наглухо).

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

Материал:

По теме: