jQuery скрипт выплывающего из-за края экрана окна
jQuery дружит с плавающими окнами , которые являются отличным средством информирования пользователей о новостях сайта, либо используются для отображения формы авторизации. Да мало ли ещё для чего может быть использовано элегантно выплывающее из-за края экрана окно!
Именно для этих задач мы разберем простой скрипт написанный с использованием базовых принципов CSS, HTML и естественно jQuery.
Если Вы регулярно пользуетесь сайтом Weblomaster.ru , тогда Вы наверняка уже читали статью о всплывающем поверх страницы DIV блоке. Тогда речь шла о появляющемся по центру странице блоке.
Но сегодня нам нужен выезжающее из-за верхнего края экрана окно. И сделать это окажется ещё проще.
Начинаем с подключения jQuery :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>jQuery выплывающий div</title>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
Для быстроты, в примере, библиотека jQuery располагается на сайте code.jquery.com В действительности её лучше располагать на Вашем сайте.
Подключив jQuery начинаем писать сам скрипта :
<script>
$(document).ready(function(){
$('a#slide').click(function(){
$('div#slideDiv').animate({top: 100}, 1000);
});
$('p#unSlide').click(function(){
$('div#slideDiv').animate({top: -320}, 1000);
});
});
</script>
При нажатии на ссылку с id=»slide» начинается анимационный эффект: div блок с id=»slideDiv» меняет свои координаты относительно верха опускаясь на сто точек ниже верхней кромки экрана top: 100. По умолчанию, этот блок спрятан за пределы экрана средствами CSS :
<style>
div#slideDiv{
position: absolute;
top: -320px;
background-color:silver;
border:1px solid gray;
}
</style>
</head>
<body>
<div id="slideDiv">Спрятанная по-умолчанию информация.</div>
<a id="slide" href="#">Нажав на ссылку запустим скрипт опускающий DIV</a>
</body>
</html>
И этого вполне достаточно для того чтобы скрипт показывал выплывающее из-за края экрана окно. Посмотрите как это работает на практике.
Уверены что Вам захочется чуть больше. Для этого мы написали расширенный вариант этого примера. В расширенной версии окно располагается по центру , а также есть ссылка убирающая DIV обратно – за пределы экрана. Откройте страницу с более полным вариантом и посмотрите исходный код (например: нажав Ctrl+U) чтобы понять как это можно реализовать.
Рубрики: CSS, HTML, jQuery · Теги: animate, css, div, jquery, блок, окно, экран, эффект
