Среда, 08.01.2025, 15:27
Приветствую Вас, Гость
Block title
Меню сайта
Категории раздела
Скрипты uCoz [300]
Шаблоны для Ucoz [66]
Статьи по Ucoz [14]
Разное [67]
Моё [10]
Мини-чат
Наш опрос
Оцените мой сайт
Результаты | Архив опросов
Всего ответов: 328
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Форма входа
Поиск
Главная » Файлы » Скрипты uCoz
Подсвечивание части страницы (отличный эффект)
13.12.2009, 13:24




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: Выключение

Разбор кода демо версии

Первым делом нам необходимо в шапке документа подключить фреймворк, скрипт плагин и таблицу стилей.

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>

Тут мы создали один текстовый элемент, а также много квадратов, внешний вид которых полностью прописан в таблице стилей.

И в самом конце перед закрывающим тегом необходимо инициализировать функцию плагина:

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>
Категория: Скрипты uCoz | Добавил: chebur
Просмотров: 562 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]