Категории раздела
Статьи по html [7]
Статьи по php [8]
Раскрутка сайта [9]
Базы данных [3]
Поисковые системы [6]
Статьи по css [9]
Мини-чат
Наш опрос
Общая оценка сайта
Всего ответов: 34
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Понедельник, 23.10.2017, 04:09
Приветствую Вас Гость
Поиск
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Мой сайт
    Главная » Статьи » Статьи по css

    Разворачивание и сворачивание слоя
    Физиология человеческого восприятия работает таким образом, что «быстрые» объекты просто не успевают восприниматься сознанием. Мозгу требуется определенное время, чтобы идентифицировать объект, понять его предназначение и усвоить информацию, которую он несет. С учетом этой особенности работают операционные системы, они отображают окна не мгновенно, а с некоторой задержкой, которая приходится на анимацию. Такого рода анимация называется «разворачивание окна» и состоит обычно в том, что окно словно прячется за невидимыми шторками, которые раздвигаются в стороны, постепенно показывая содержимое окна. Разворачивание может происходить по горизонтали, вертикали или сразу в двух направлениях. Аналогично совершается и сворачивание окна, но в этом случае информация скрывается.

    Описанные действия с окнами можно перенести и на слои, которые должны отображаться поверх веб-страницы. Такие слои могут применяться для отображения дополнительной информации, например, различных предупреждений.

    Для получения подобного эффекта, вначале потребуется создать слой с абсолютным позиционированием (пример 1).

    Пример 1. Создание слоя


    <style type="text/css">

    #window {
    background: #fc0; /* Цвет фона */
    width: 300px; /* Ширина слоя в пикселах */
    height: 200px; /* Высота слоя в пикселах */
    position: absolute; /* Абсолютное позиционирование */
    left: 50%; /* Положение слоя по горизонтали */
    top: 50%; /* Положение слоя по вертикали */
    margin-left: -150px; /* Смещаем слой влево */
    margin-top: -100px; /* Смещаем слой вверх */
    clip: rect(auto 150 auto 150) /* Скрываем содержимое слоя */
    }

    #window P {
    margin: 0px; /* Убираем отступы вокруг параграфа */
    padding: 10px /* Поля вокруг текста */
    }

    #title {
    background: #666; /* Цвет фона заголовка */
    padding: 5px; /* Поля вокруг текста заголовка */
    font-weight: bold; /* Жирное начертание текста */
    text-align: right /* Выравнивание по правому краю */
    }

    #title A {
    color: white; /* Белый цвет ссылок в заголовке */
    text-decoration: none /* Убираем подчеркивание у ссылок */
    }

    </style>

    <div id=window>
    <div id=title><a href="javascript: curtainOff()">Закрыть окно [X]</a></div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.</p>
    </div>


    Вид слоя управляется с помощью стилей, как показано в данном примере. Содержимое самого слоя первоначально скрыто с помощью параметра clip, который работает только для абсолютно позиционированных элементов. По этой причине для слоя обязательно требуется задать свойство position со значением absolute.

    Сам эффект разворачивания основан на динамическом изменении значений параметра clip, поэтому вначале разберем, что он из себя представляет.

    Атрибут clip определяет прямоугольную область элемента, в которой будет отображаться его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым.

    Синтаксис применения clip следующий:

    clip: rect(y1 x1 y2 x2) | auto


    Значение auto оставляет край без изменения, а положение остальных значений показано на рис. 1.


    Рис. 1. Значения параметра clip

    Если мы хотим разворачивать слой только по горизонтали, то нас интересуют только значения x1 и x2. Причем, значение x1 постепенно должно уменьшаться до нуля, а x2, наоборот, увеличиваться, пока не достигнет значения, равное ширине слоя. В примере 2 показано создание функции curtainOn(), которая изменяет требуемые значения координат.

    Пример 2. Динамическое изменение значений атрибута clip


    step = 10 // Шаг приращения координат
    width = 300 // Ширина слоя в пикселах
    x1 = x2 = width/2

    // Начальное значение координат x1 и x2
    function curtainOn() {

    // Выполняем до тех пор, пока переменная x1 не станет равной нулю
    if (x1 > 0) {

     x1 -= step // Уменьшаем x1 на величину step
     x2 += step // Увеличиваем x2 на величину step
     clip = "auto " + x2 + " auto " + x1 // Формируем значение для атрибута clip

    // Изменяем значение clip для слоя window
     document.getElementById("window").style.clip = "rect(" + clip + ")"

    // Рекурсивно вызываем функцию curtainOn каждые 30 миллисекунд
     setTimeout("curtainOn()", 30)
    }

    }


    Пошаговое изменение координат атрибута clip происходит за счет использования встроенной функции setTimeout, в качестве ее аргумента указывается функция curtainOn, которую следует вызывать через определенный промежуток времени. Изменяя значение времени в большую или меньшую сторону, можно регулировать скорость раскрытия слоя. Также на скорость влияет величина шага приращения step, которая к тому же, управляет и плавностью движения.

    Доступ к свойствам слоя осуществляется через функцию getElementById, которая в настоящее время является стандартным методом для получения и модификации свойств объектов. Современные браузеры в полной мере поддерживают getElementById.

    Сворачивание слоя происходит аналогично, но теперь уже требуется увеличивать значение координаты x1 (которая после разворачивания равна нулю), а значение координаты x2 (равную ширине слоя) уменьшать.

    Пример 3. Функция для сворачивания слоя


    function curtainOff() {

    if (x2 > (width/2)) {

     x1 += step
     x2 -= step
     clip = "auto " + x2 + " auto " + x1

     document.getElementById("window").style.clip = "rect(" + clip + ")"
     setTimeout("curtainOff()", 30)
    }

    }


    Браузер Opera хотя корректно сворачивает и разворачивает содержимое слоя, но сам фон при этом не скрывается. Получается, что цветной прямоугольник будет висеть постоянно, закрывая основное содержание веб-страницы. Специально для этого браузера следует добавить свойство display со значением none, а затем для отображения слоя установить значение block. Окончательный код показан в примере 4.

    Пример 4. Полный листинг для разворачивания и сворачивания слоя


    <html>
    <head>
    <style type="text/css">

    #window {
    background: #fc0;
    width: 300px; height: 200px;
    position: absolute;
    left: 50%; top: 50%;
    margin-left: -150px; margin-top: -100px;
    clip: rect(auto 150 auto 150)
    }

    #window P {
    margin: 0px; padding: 10px
    }

    #title {
    background: #666; padding: 5px; font-weight: bold; text-align: right
    }

    #title A {
    color: white; text-decoration: none
    }

    </style>

    <script language="JavaScript">

    step = 10
    width = 300
    x1 = x2 = width/2

    function curtainOn() {

    // Отображаем слой window в браузере Opera
    if (Opera) document.getElementById("window").style.display = "block"

    if (x1 > 0) {

    x1 -= step
    x2 += step
    clip = "auto " + x2 + " auto " + x1

    document.getElementById("window").style.clip = "rect(" + clip + ")"
    setTimeout("curtainOn()", 30)
    }

    }

    function curtainOff() {

    if (x2 > (width/2)) {

    x1 += step
    x2 -= step
    clip = "auto " + x2 + " auto " + x1

    document.getElementById("window").style.clip = "rect(" + clip + ")"
    setTimeout("curtainOff()", 30)
    }

    // Прячем слой window в браузере Opera
    else if (Opera) document.getElementById("window").style.display = "none"

    }

    </script>
    </head>
    <body>

    <div id=window>
    <div id=title><a href="javascript: curtainOff()">Закрыть окно [X]</a></div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
    volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution
    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    Duis te feugifacilisi.</p>
    </div>

    <br><br>
    <a href="javascript: curtainOn()">Развернуть окно</a>


    <script language="JavaScript">

    // Проверяем, какой браузер перед нами
    Opera = document.getElementById && window.opera

    // Если Opera. то прячем слой window
    if (Opera) document.getElementById("window").style.display = "none"

    </script>

    </body>
    </html>


    Не обязательно делать разворачивание слоя по горизонтали, указанным способом можно разворачивать и по вертикали (пример 5) или одновременно в двух направлениях.

    Пример 5. Разворачивание и сворачивание слоя по вертикали


    <html>
    <head>
    <style type="text/css">
    #window {
    background: #fc0;
    width: 300px; height: 200px;
    position: absolute;
    left: 50%; top: 50%;
    margin-left: -150px; margin-top: -100px;
    clip: rect(100 auto 100 auto)
    }

    #window P {
    margin: 0px; padding: 10px
    }

    #title {
    background: #666; padding: 5px; font-weight: bold; text-align: right
    }

    #title A {
    color: white; text-decoration: none
    }

    </style>

    <script language="JavaScript">

    step = 10
    height = 200
    y1 = y2 = height/2

    function curtainOn() {

    if (Opera) document.getElementById("window").style.display = "block"

    if (y1 > 0) {

    y1 -= step
    y2 += step
    clip = y1 + " auto " + y2 + " auto"

    document.getElementById("window").style.clip = "rect(" + clip + ")"
    setTimeout("curtainOn()", 30)
    }

    }

    function curtainOff() {

    if (y2 > (height/2)) {

    y1 += step
    y2 -= step
    clip = y1 + " auto " + y2 + " auto"

    document.getElementById("window").style.clip = "rect(" + clip + ")"
    setTimeout("curtainOff()", 30)
    }
    else if (Opera) document.getElementById("window").style.display = "none"

    }

    </script>
    </head>
    <body>

    <div id=window>
    <div id=title><a href="javascript: curtainOff()">Закрыть окно [X]</a></div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
    volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution
    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    Duis te feugifacilisi.</p>
    </div>

    <br><br>
    <a href="javascript: curtainOn()">Развернуть окно</a>


    <script language="JavaScript">

    Opera = document.getElementById && window.opera
    if (Opera) document.getElementById("window").style.display = "none"

    </script>

    </body>
    </html>
    Категория: Статьи по css | Добавил: stazis (15.05.2009)
    Просмотров: 1250 | Рейтинг: 5.0/1
    Всего комментариев: 0
    Copyright MyCorp © 2017

    Сделать бесплатный сайт с uCoz