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

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

Закрывается такое сообщение нажатием на крестик с эффектом анимации на 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
Просмотров: 34822
Правила перепечатки


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

^ Наверх ^