Плавающее сообщение вверху Вашего сайта.

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

Закрывается такое сообщение нажатием на крестик с эффектом анимации на jQuery.

Чтобы увидеть пример такого сообщения нажмите на картинку ниже.

Шаг 1.

Скачаем изображение крестика и скрипт jQuery, который подключим к нашему документу.

<script type="text/javascript" src="jQuery1.2.6.js"></script>

Шаг 2.

Между тегами <head> пропишем следующий код:

<script type="text/javascript" language="javascript">

        $(document).ready(function()

        {

        $(window).scroll(function()

        {

        $('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350}); 

        });

        $('#close_message').click(function()

        {

        $('#message_box').animate({ top:"+=15px",opacity:0 }, "slow");

        });

        });

  </script>

Шаг 3.

В таблицу стилей или в сам документ пропишем следующие стили для плавающего сообщения:

 #message_box { 

position: absolute; 

top: 0; left: 0; 

z-index: 10; 

background:#ffc;

padding:5px;

border:1px solid #CCCCCC;

text-align:center; 

font-weight:bold; 

width:99%;

}

Шаг 4.

Документ будет иметь структуру, состоящую из двух блоков <div>. В одном из них будет отображаться сообщение, а в другом будет содержаться весь остальной контент страницы.

Таким образом, код будет выглядеть так:

<div id="message_box"><img id="close_message" style="float:right;cursor:pointer"  src="cross.png" />Здесь Ваше сообщение</div>

<div style="margin-top:50px">

  Здесь остальное содержание Вашей страницы

  </div>

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.roshanbh.com.np
Перевел: Сергей Патин
Урок создан: 14 Апреля 2009
Просмотров: 34701
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^