Ромка!eu

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

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

  • Просмотреть
  • Голоса

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

701
point
Довольно давно я задумался о решении такой задачки: необходимо при помощи ява-скрипта поворачивать картинку на заданный угол. Сейчас нашел её решение — плагин 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
  • Quote

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

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

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

  • ответить
  • quote
  • -10 points

Спасибо.

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

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

  • ответить
  • quote
  • -86 points

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

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

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

  • ответить
  • quote
  • -23 points

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

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

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

  • ответить
  • quote
  • -29 points

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

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

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

  • ответить
  • quote
  • -27 points

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

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

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

  • ответить
  • quote
  • -47 points

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

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

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

  • ответить
  • quote
  • -38 points

качество

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

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

  • ответить
  • quote
  • -69 points

все про банки каталог банків

Anonymous (не проверено) → Пт, 06/04/2010 - 15:23

все про банки каталог банків автопутешествия советы путешественникам авиация история авиации астрономія і космонавтика астрономія seropol5

  • ответить
  • quote
  • -36 points

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

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

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

  • ответить
  • quote
  • -17 points

Re: Юрий!

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

Юрий!

  • ответить
  • quote
  • 1 point

thanx

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

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

  • ответить
  • quote
  • 33 points

Re: Спасибо.

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

Спасибо.

  • ответить
  • quote
  • -40 points

da poshol ty so svoim jquery

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

da poshol ty so svoim jquery padla

  • ответить
  • quote
  • -21 points

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

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

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

  • ответить
  • quote
  • -6 points

answer this topic

loan (не проверено) → Ср, 02/01/2012 - 15:21

That is understandable that cash makes us free. But how to act when someone does not have cash? The only one way is to receive the business loans or bank loan.

  • ответить
  • quote
  • -7 points

Отправить комментарий

Содержание этого поля является приватным и не предназначено к показу.
  • Доступны HTML теги: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Строки и параграфы переносятся автоматически.
  • Вы можете использовать тэг <code></code> для подсветки синтаксиса программного кода. The supported tag styles are: <foo>, [foo].
  • You may quote other posts using [quote] tags.

Подробнее о форматировании

CAPTCHA
Если вы человек, а не робот, то введите текст с картинки. Если вы робот, то велкам ту майкрософт.ком.

Обо мне

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

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

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

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

  • AJAX. Обмен данными между клиентом и сервером, закачка на сервер файлов без перезагрузки страницы при помощи библиотеки jQuery.
  • Пример разработки плагина для модуля CCK
  • Темизация Drupal. Часть 1
  • Темизация Drupal. Часть 2. Анатомия темы оформления Drupal
  • Авторизация на Drupal-сайте с помощью аккаунта ВКонтакте
  • Темизация Drupal. Часть 3. Основы Drupal Forms API и темизация форм
  • Темизация Drupal. Часть 4. Темизация Views
  • Разработка сайта на Drupal. Часть 4. Пример разработки корпоративного интранет-сайта на Drupal
  • Вращение изображений при помощи Javascript
  • Динамическое добавление элементов к форме

Подписка


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

  • Oz → Швабрашвабр2 → слабовато для
  • loan → Вращение изображений при помощи Javascript → answer this topic
  • CopelandLacey33 → Доставка → reply this post
  • vitsss → Авторизация на Drupal-сайте с помощью аккаунта вКонтакте → hostinh nic.ru and vk api
  • dimasikov → Автоматическая "газетная" верстка (верстка в несколько колонок) → Я похожее делал для с этим
  • max2012 → Разработка сайта на Drupal. Часть 2. Архитектура Drupal. → Подвесные потолки Опосля
  • Антон → Темизация Drupal. Часть 4. Темизация Views → Отлично!
  • Itsmypersonal → Зима 2010. Поездка в Тайланд, Индонезию и Сингапур. Часть 2 — Пхукет → Пхукет - да!
  • Sheldon → Перетаскивание ячеек таблицы. Table drag and drop — плагин для jQuery → Здравствуйте! Подскажите
  • Sheldon → Home sheep home → Одна из тех игр в которые

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

  • Проба пера в HTML5 + canvas. Эффект ластика
  • Шесть рукопожатий
  • Доклад на DrupalConfMoscow 2011
  • Статусы разных сущностей в Друпале 6
  • Футер, прибитый к низу страницы
  • Путешествие по Перу и Боливии. Часть 2
  • Путешествие по Перу и Боливии. Часть 1
  • Несколько панорам из путешествия по Перу и Боливии
  • Авторизация на Drupal-сайте с помощью аккаунта ВКонтакте
  • Home sheep home

Тэги

dckyiev09 Drupal jquery Боливия Отдых Перу Работа Штуки-дрюки зима 2010 модуль статья темизация
еще тэги

Вход для пользователей

Что такое OpenID?
  • Войти по OpenID
  • Скрыть вход по OpenID
  • Зарегистрироваться
  • Запросить новый пароль

Навигация

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

Курсы валют

  • 100 Казахских тенге — 19,9970 (+0.01)
  • 10 Украинских гривен — 36,9677 (-0.01)
  • 10 Китайских юаней — 47,1500 (-0.01)
  • 100 Японских иен — 38,4449 (-0.07)
  • 1 Доллар США — 29,6795 (-0.01)
  • 1 Евро — 39,4767 (+0.07)
  • 10000 Белорусских рублей — 35,8016 (+0.58)
  • 1 Турецкая лира — 17,0200 (-0.02)

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

  • Понедельник начинается в субботу
  • С Новым Годом!
  • Несколько панорам из путешествия по Перу и Боливии
  • Шпаргалка по командам и хоткеям Unix
  • Модуль скидок для электронного магазина работающего на Drupal + eCommerce
  • Cinnamon Chasers - Luv Deluxe (Music Video)
  • Новый дизайн для Швабрашвабр
  • Сегодня 256 день в году — день программиста
  • Друпал ограничен только способностями разработчика!
  • Темизация Drupal. Часть 2. Анатомия темы оформления Drupal

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

Вид на Осло-фьерд со стены замка
А это уже полуостров Крым, на пути в Керчь.
Градиент
Копенгаген, Кристиания, Граффити 4
Дорога, на поверхности видны следы копыт
Дорожка
Вид на Мраморную церковь с площади Амалиенборг
В Сингапурском зоопарке. Будда?
В пути
Тринидадские спортсменчики
Еще одно фото резиденции короля
И у люююбви у нааашеей сееела...
Бронзовое море
Горы
Пустыня
Местный ходок
  • Отдых
  • Работа

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