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