Ромка!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 Казахстанских тенге — 21,3687 (-0.43)
  • 10 Украинских гривен — 27,2852 (-13.04)
  • 1 Китайский юань — 10,2706 (-40.98)
  • 100 Японских иен — 53,5332 (+12.67)
  • 1 Доллар США — 65,6210 (+33)
  • 1 Евро — 69,8076 (+29.42)
  • 10000 Белорусских рублей — 36,3310 (-2.51)
  • 1 Турецкая лира — 22,9540 (+4.99)

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

  • Куба. Лето 2008. Часть 5
  • Новый год 2008. Часть 2. Нордсетер, Лиллихаммер, Sjusjoen.
  • Понедельник начинается в субботу
  • Темизация Drupal. Часть 4. Темизация Views
  • Закончил работу над адаптацией скрипта Fotonotes для Drupal 6
  • Еще одна очень меткая картинка
  • Зима 2010. Поездка в Тайланд, Индонезию и Сингапур. Часть 1 — Пхукет и Джакарта
  • Разработка сайта на Drupal. Часть 1. Введение.
  • Поездка в Киев
  • Вспомнил детство

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

Автописта
Замок Акерхус вечером
На пути в Баракоа
А это уже полуостров Крым, на пути в Керчь.
Дольмен
В Сингапурском зоопарке. Попугай
Копенгаген, Кристиания, Граффити 4
Я с каким-то дядькой читаю газету
Я с местным рональдом
Гонщик
Старая и новая наши машины — пыжик и сузуки джимни
Это я по дороге из Буканеро в Баракоа
Я и мой автопарк :))
Недалеко от Красной поляны
Сочи ночью
Я и разноцветные рыбы
  • Отдых
  • Работа

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