Обратите внимание посетителей
e24SpotLight - Mootools плагин, который позволяет обратить внимание посетителей на любой объект на странице. Получается неплохой эффект, когда необходимая область подсвечивается.
Возможные опции
- transition: Названия эффекта перехода, например: ‘quad-out’, ‘bounce-in’, ‘elastic-in’, etc.
- duration: Продолжительность эффекта в милисекундах.
- zindex: z-index слоя наложения.
- bgcolor: цвет слоя наложения.
- opacity: прозрачность слоя.
- margin: поля области подсветки.
- delay: задержка в милисекундах перед тем как спрятать слой. Если установить 0, тогда слой не будет исчезать просто так (только при клике).
Методы
* lightOn: Включение эффекта. Можно задать название элемента, а можно и точные координаты {left: 100, top: 150, width: 300, height: 300}.
* lightOff: Выключение
Разбор кода демо версии
Первым делом нам необходимо в шапке документа подключить фреймворк, скрипт плагин и таблицу стилей.
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" src="js/mootools-1.2.2-core-nc.js"></script>
<script type="text/javascript" src="js/e24spotlight-1.0.js"></script>
Далее в теле документа прописываем все элементы для выделения.
<h3 id="text">Нажмите на любой квадрат</h3>
</div>
<div id="visor" >
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Тут мы создали один текстовый элемент, а также много квадратов, внешний вид которых полностью прописан в таблице стилей.
И в самом конце перед закрывающим тегом </body> необходимо инициализировать функцию плагина:
<script type="text/javascript" >
/* <![CDATA[ */
window.addEvent('domready', function() {
var spotLight = new e24SpotLight({
transition: 'quad:in',
duration: 200,
delay: 2000
});
$$('#visor div').each(function(el) {
el.addEvent('click', function(e) {
e.stop();
spotLight.lightOn(el);
});
});
var text = $('text');
text.addEvent('click', function(e) {
e.stop();
spotLight.lightOn(text);
});
});
/* ]]> */
</script>
За несколько минут можно создать довольно увлекательный эффект. Главное, дайте волю своему воображению.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.flash-free.org
Перевел: Максим Шкурупий
Урок создан: 14 Июня 2009
Просмотров: 34939
Правила перепечатки
5 последних уроков рубрики "Mootools"
-
Создание меню при помощи MenuMatic 0.68.3
Создание горизонтального и вертикального меню при помощи MenuMatic 0.68.3
-
Анимированные закладки с использованием MooTools
Один из возможных способов поместить много контента на одно небольшое место - это использование системы закладок. Данный урок покажет как создать систему анимированных закладок с использованием CSS, куки и анимированного переключения панелей.
-
Выезжающая панель для сайта на Mootools
Изучив этот урок, Вы научитесь делать компактную выплывающую панель для сайта. Разрабатывать ее мы будем с помощью Mootools, ну и конечно же не обойдемся и без CSS-стилей, которые будут играть здесь роль дизайнинга панели
-
Увеличение / Уменьшение текстовых полей с помощью MooTools
Короткий урок про то, как добавить к любому текстовому полю возможность увеличения или уменьшения.
-
Multi-Select c помощью MooTools
В этом уроке речь пойдет о переносе выбранных опций из одного multi-select в другой. Думаю, что подобный виджет вы уже видели. Обычно он применяется на сайтах объявлений и регистрации в каталогах, где ваше объявление (ваш сайт) подходит для размещения в нескольких рубриках. В этом уроке мы реализуем подобный виджет с помощью Mootools.