|
|
Четверг, 01.11.2012, 21:43 | Сообщение # 1
|
|
|
Анимация и эффекты в javascript с помощью mootools
Сегодня я продолжу рассказ о библиотеке mootols. Это одна из наиболее известных javascript-библиотек, позволяющих внедрить на веб-страницу немножко эффектов и чуть-чуть анимации. Сегодня мы завершим знакомство с обязательной частью mootols и попробуем создавать всплывающие подсказки, управлять перемещением элементов, эффектами перехода одного изображения в другое. В прошлый раз мы остановились на изучении методов поиска html-элементов на странице. “Страшное” чередование вызовов getElementsByTagName и getElementById осталось в далеком прошлом: все современные javascript-библиотеки имеют средства для того, чтобы выполнить поиск элемента на странице, записав его характеристики: id, класс css, имя тега или их комбинацию. Честно говоря, в этом плане mootools слабее jquery (об этой библиотеке я писал в серии статей летом 2007), но сегодня разговор прежде всего об анимации.
Начнем с простенького задания: при наведении мыши на некоторое изображение оно должно смениться другим. Сложность не в том, чтобы создать обработчик события omouseover и onmouseout, а в сущей безделице: в том, чтобы запустить процесс анимации именно тогда, когда все нужные для нее ресурсы будут загружены браузером. Т.е. мы навели мышь на картинку, и она должна тут же смениться новой, а не так: сначала исчезает старая картинка, и только через несколько секунд появляется новая. Даже самый начинающий javascript-разработчик знает, что можно предварительно загрузить нужные картинки, но не показывая их до поры до времени — например, так:
var imgHover = new Image ();
imgHover.src = '2.png';
И все было бы хорошо, если бы веб-страница не содержала множество изображений, css- и javascript-файлов, загружающихся в хаотичном порядке. Вовсе не факт, что к тому времени, как пользователь наведет мышь на изображение, то, второе, изображение будет уже загружено. В составе mootols есть класс Asset, его назначение — динамическая загрузка css- и js-файлов, изображений. Для картинок (к сожалению, только для них) можно установить обработчик события “все картинки были загружены”. Вот первый пример:
new Asset.javascript('js/logic.js', {id: 'js_logic});
new Asset.css('css/for_ie.css', {id: 'css_ie_fix'});
Первый параметр вызова функции css или javascript — имя загружаемого файла, затем идет перечисление атрибутов, которые будут назначены для динамически созданных тегов “
|
|
 |
