Обратите Внимание Посетителей

Тема в разделе "Модули и дополнения", создана пользователем admin, 8 июн 2016.

  1. TopicStarter Overlay
    Online

    admin Команда форума Администратор

    Сообщения:
    2.321
    Симпатии:
    76.674
    Репутация:
    170
    e24SpotLight - Mootools плагин, который позволяет обратить внимание посетителей на любой объект на странице. Получается неплохой эффект, когда необходимая область подсвечивается.
    [​IMG]

    Возможные опции

    - 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>     
    За несколько минут можно создать довольно увлекательный эффект. Главное, дайте волю своему воображению.
     

    Вложения:

    • spotlight.zip
      Размер файла:
      24,4 КБ
      Просмотров:
      5
    samjoo, 1san4ik и Elsvet нравится это.
  2. Offline

    Elsvet Пользователь

    Сообщения:
    62
    Симпатии:
    47
    Репутация:
    7
    Спасибо