30.09.2009, 09:14 | |||||
Подсвечивание части страницы (отличный эффект)![]() e24SpotLight - Mootools плагин, который позволяет обратить внимание посетителей на любой объект на странице. Получается неплохой эффект, когда необходимая область подсвечивается. Возможные опции - transition: Названия эффекта перехода, например: ‘quad-out’, ‘bounce-in’, ‘elastic-in’, etc. Методы * lightOn: Включение эффекта. Можно задать название элемента, а можно и точные координаты {left: 100, top: 150, width: 300, height: 300}. Разбор кода демо версии Первым делом нам необходимо в шапке документа подключить фреймворк, скрипт плагин и таблицу стилей.
Code <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> Далее в теле документа прописываем все элементы для выделения.
Code <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> необходимо инициализировать функцию плагина:
Code <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> Материал взят с сайта infoscript.ru
| |||||
Категория: Скрипты uCoz | Просмотров: 2805 | Добавил: antisept | Рейтинг: 5.0/1 | | |||||
Теги: |
Пока комментариев нет. Ты можешь быть первым! | |
Кроме того, материал перепечатывали с сайта на сайт, ставили... файл можно найти на Вэбочке (название tables_tablichki_dli_foruma.js).