Ромка!eu

  • Отдых
  • Работа
Главная — Блоги — Ромка's blog

Это старая (Drupal 6) версия сайта romka.eu. Она больше не обновляется, комментирование материалов отключено. Обновленная версия сайта доступна по адресу http://romka.eu.

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

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

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


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

Немного более сложный пример. Поворачиваем изображение при наведении на него курсора мышки и возвращаем его в исходное состояние, когда курсор не находится над изображением:
<?php
  
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.
  • Javascript
  • jquery
  • mootools
  • wilq32
  • вращение
  • изображение
  • поворот
  • Ромка's blog

хм... Интересно, спасибо.

SiLeNt → Пнд, 03/16/2009 - 02:23

хм... Интересно, спасибо. Попробую логотип на своём сайте оживить.

Спасибо.

Alex Leo (не проверено) → Втр, 03/31/2009 - 13:49

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

Красиво, но в осле не

Igor (не проверено) → Втр, 05/12/2009 - 19:39

Красиво, но в осле не работает.

В Опере тоже не фунциклирует.

Tesmon (не проверено) → Вс, 05/24/2009 - 12:01

В Опере тоже не фунциклирует. Просто три одинаковые картинки видно.

Вышла новая версия плагина wilq32

Ромка → Чт, 06/18/2009 - 22:17

Вышла новая версия плагина! Теперь он работает в ИЕ. Правда в Опере (тестировал на 9.64) по прежнему не работает.

прикольно. кстати в новом

Anonymous (не проверено) → Пт, 07/31/2009 - 21:07

прикольно.
кстати в новом файрфоксе уже есть элементы 3d css.

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

pinnokio (не проверено) → Пт, 02/05/2010 - 01:50

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

качество

Anonymous (не проверено) → Сб, 11/07/2009 - 12:52

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

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

pablobablo (не проверено) → Вс, 10/10/2010 - 08:05

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

Re: Юрий!

Бобров Вячеслав (не проверено) → Пнд, 02/07/2011 - 12:10

Юрий!

thanx

ray (не проверено) → Втр, 02/15/2011 - 23:37

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

Re: Спасибо.

Меховщиков Руслана → Сб, 05/28/2011 - 21:01

Спасибо.

da poshol ty so svoim jquery

Anonymous (не проверено) → Ср, 11/09/2011 - 01:33

da poshol ty so svoim jquery padla

убиться о стену, не работает

Вася (не проверено) → Пт, 12/16/2011 - 16:27

убиться о стену, не работает и всё! Голову поломал уже, как его включит?

Обо мне

Всем привет!
Меня зовут
Роман Архаров, я профессиональный веб-разработчик, программирую на языках PHP, Python и Action-Script, в работе использую фреймворки Drupal и Django. В этом блоге я размещаю заметки и статьи, связанные с моей работой, отдыхом и другими интересными мне темами.

Похожие заметки

  • Перетаскивание строк таблицы. Table drag and drop — плагин для jQuery
  • Автоматическая "газетная" верстка (верстка в несколько колонок)
  • Баг jQuery в Firefox 3 и WebKit
  • Получение заголовков (HTTP-headers) страницы при помощи Java-script
  • Динамическое добавление элементов к форме

Популярные заметки

  • Авторизация на Drupal-сайте с помощью аккаунта ВКонтакте
  • Перетаскивание строк таблицы. Table drag and drop — плагин для jQuery
  • Темизация Drupal. Часть 3. Основы Drupal Forms API и темизация форм
  • Темизация Drupal. Часть 4. Темизация Views
  • AJAX. Обмен данными между клиентом и сервером, закачка на сервер файлов без перезагрузки страницы при помощи библиотеки jQuery.
  • Кеширование на Drupal-сайте. Сравнение встроенного в Drupal кеша, статического файлового кеша (модуль Boost) и Varnish
  • Тестирование модуля "Inner poll"
  • Несколько панорам из путешествия по Перу и Боливии
  • Arduino + bluetooth, небольшая проблема
  • Пример разработки плагина для модуля CCK

Подписка


Последние комментарии

  • drupal-admin → Кеширование на Drupal-сайте. Сравнение эффективности встроенного в Drupal кеша, статического файлового кеша (модуль Boost) и Var → Отличная статья
  • Меховщиков Руслана → Проверка имени пользователя на наличие букв из разных алфавитов → Re: Читал про это уже на
  • Вероника → Куба. Лето 2008. Часть 3 → По поводу "приветливых жителей" Тринидада
  • Sfero → Статья в PC Magazine/RE. Drupal: разработка модуля → Немного о контенте
  • RemaGe → Статья в PC Magazine/RE. Drupal: разработка модуля → -)
  • Ромка → Статья в PC Magazine/RE. Drupal: разработка модуля → Да, будет сборка, та которую
  • RemaGe → Статья в PC Magazine/RE. Drupal: разработка модуля → -)
  • anatinge → Поездка в Киев → спасибо :)
  • Ромка → Поездка в Киев → Да, в общем-то, ничего
  • GogA → Поездка в Киев → Заинтриговал, что там за

Новые заметки

  • Кеширование на Drupal-сайте. Сравнение встроенного в Drupal кеша, статического файлового кеша (модуль Boost) и Varnish
  • Любопытное поведение модуля syslog в шестом Друпале (баг?)
  • Arduino + bluetooth, небольшая проблема
  • Гугл 1 марта прекратил поддержку сервиса Google Friend Connect
  • Проба пера в HTML5 + canvas. Эффект ластика
  • Шесть рукопожатий
  • Доклад на DrupalConfMoscow 2011
  • Статусы разных сущностей в Друпале 6
  • Футер, прибитый к низу страницы
  • Путешествие по Перу и Боливии. Часть 2

Тэги

Drupal jquery Куба Лето 2007 Лето 2008 Отдых Работа Штуки-дрюки лето модуль статья цитата
еще тэги

Навигация

  • Exchange rate
  • Переход по внешней ссылке
  • Последние сообщения
  • Фотогалереи

Курсы валют

  • 100 Тенге — 14,9341 (+0.06)
  • 10 Гривен — 19,4396 (+0.01)
  • 1 Юань — 11,2618 (+0.09)
  • 100 Иен — 54,6262 (+0.28)
  • 1 Доллар США — 80,4261 (+0.08)
  • 1 Евро — 94,3841 (+0.82)
  • 10 Турецких лир — 19,6252 (-0.05)

10 случайных заметок

  • Куба. Лето 2008. Часть 1
  • Разработка сайта Drupal.ru
  • Лето 2007. Путешествие в Камбоджу – Таиланд – Малайзию. Часть 3. Камбоджа, Пномпень.
  • Разработка сайта на Drupal. Часть 2. Архитектура Drupal.
  • Новый год 2008. Часть 1
  • Перетаскивание строк таблицы. Table drag and drop — плагин для jQuery
  • Друпал ограничен только способностями разработчика!
  • Куба. Лето 2008. Часть 3
  • Семинар по хапкидо в Днепропетровске
  • Несколько смешных картинок

Случайные фото

Радуга над футбольным полем в Лужниках
Еще горы
Вид на Бангкок с верхушки отеля Байок
Еще одно фото резиденции короля
Буквы
Еще одно фото замка
Я и бамбук
Опять я
Тринидад. Лошадка держит домик
Горы
Взгляд в будущее
Желтый арбуз! Ммм, юмми!
Закат в Гаване
Друпликон и моя тень
В аэропорту
Сочи ночью
  • Отдых
  • Работа

При использовании материалов с сайта, пожалуйста, ставьте ссылку на источник. E-mail для связи: mne@romka.eu.