Ajax Russia : Аякс по-русски

Свежие новости из мира IT

Script.aculo.us morph - красивые морфинг эффекты

August 20th, 2007 | Category: CSS, Javascript, Web20 | Автор: Александр

script.aculo.us - web 2.0 javascriptМорфинг эффекты есть в Script.aculo.us уже некоторое время, но обратил я на них внимание только недавно, когда пытался написать фото слайдшоу на джаваскрипте. Мне нужно было, при нажатии на фотографию, увеличить и передвинуть её в сторону. И всё это передвижение должно происходить плавно, а не просто изменить размер и координаты.

Начал искать джаваскрипт библиотеки для анимации, и вспомнил что в Script.aculo.us, который я и так постоянно использую, уже есть всё, что мне надо. Называется эффект Morph, и сейчас я покажу как просто его использовать.

Значит у нас есть картинка размером 120 на 100 пикселей, мы хотим увеличить её в 3 раза и переместить на 200 пикселей направо и на 200 пикселей вниз.

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  6.     <title>Морфинг</title>.
  7.     <script type="text/javascript" charset="utf-8" src="prototype.js"></script>
  8.     <script type="text/javascript" charset="utf-8" src="effects.js"></script>
  9. </head>
  11.     <p>
  12.         <img src="scriptaculous-web20-javascript.gif" alt="image for morphing example" id="myimage"/>
  13.     </p>
  14. </body>
  15. </html>

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

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript" charset="utf-8">
  2.     // ждём когда документ загрузился
  3.     document.observe('contentloaded', function()
  4.     {
  5.         // ждём, когда на картинку кликнут
  6.         $('myimage').observe('click', function()
  7.         {
  8.             // "this" это наша картинка
  9.             if(this.style.width != "360px")
  10.             {
  11.                 // морфинг
  12.                 this.morph('width: 360px').morph('height: 300px').morph('margin: 200px 0 0 200px');
  13.             }
  14.             else
  15.             {
  16.                 // морфинг в начальное состояние
  17.                 this.morph('width: 120px; height: 100px; margin: 0px');
  18.             }
  19.         });
  20.     });
  21. </script>

Этот код мы, как обычно, помещаем в HEAD. Готовый вариант можно посмотреть по этому адресу.

Хочу обратить ваше внимание на возможность делать цепочку морфинг эффектов.

PLAIN TEXT
JavaScript:
  1. this.morph('width: 360px').morph('height: 300px').morph('margin: 200px 0 0 200px');

- это цепочка из трёх разных морфинг эффектов. Каждому эффекту можно давать, как параметр, промежуток времени между эффектами. Подробнее о морфинге можно узнать в блоге разработчика Scriptaculous.

В туториале использовались следующие версии библиотек:

del.icio.us Забобрить!

2 Comments so far

  1. Anonymous August 20th, 2007 13:41

    cool

  2. Dimas June 9th, 2008 09:38

    Я тока ка второй день на этом сайте - а уже узнал больше чем за год чтения ebooks - рулез.

Leave a reply