ВСПЛЫВАЮЩЕЕ ОКНО В
КОНЦЕ СТРАНИЦИ С JQUERY
На днях я читал статью в NYTimes, и мне очень понравилось
окно, которое выдвигается из правого нижнего угла, когда вы читаете последнюю
часть статьи. Это окно показывает следующую статью из той же категории, и я
подумал, что это может быть интересным
для любого блога или веб-сайта.
ПОСМОТРЕТЬ
ДЕМО СКАЧАТЬ
ИСТОЧНИКА
Идея состоит в том, чтобы иметь элемент на странице (при
этом в последнем абзаце), который вызывает окно.
Хорошо, давайте начнем!
РАЗМЕТКА
Во-первых, нам нужно вставить где-то в пункте страницы ID «последний»:
|
<p id="last">
Some paragraph text
</p>
|
Затем, нам понадобятся следующие HTML для окна:
|
<div id="slidebox">
<a class="close"></a>
<p>More in Technology & Science (4 of 23 articles)</p>
<h2>The Social Impact of Scientific Research and new
Technologies</h2>
<a class="more">Read More »</a>
</div>
|
Ссылка элемента с классом "закрыть" даст
пользователю возможность, закрыть окно, и оно не появится снова.
CSS
Хорошо, давайте добавим некоторый стиль для нашего окна:
|
#slidebox{
width:400px;
height:100px;
padding:10px;
background-color:#fff;
border-top:3px solid #E28409;
position:fixed;
bottom:0px;
right:-430px;
-moz-box-shadow:-2px 0px 5px #aaa;
-webkit-box-shadow:-2px 0px 5px #aaa;
box-shadow:-2px 0px 5px #aaa;
}
|
Мы даем для окна фиксированное положение, чтобы оно следовало
за пользователем, пока он прокручивает страницу.
Посмотри, на CSS3.info, если вы хотите увидеть, как создать
тень: Box-тень, одна из
лучших новых особенностей CSS3
Текстовые элементы и ссылка будет иметь следующий стиль:
|
#slidebox p, a.more{
font-size:11px;
text-transform:uppercase;
font-family: Arial,Helvetica,sans-serif;
letter-spacing:1px;
color:#555;
}
a.more{
cursor:pointer;
color:#E28409;
}
a.more:hover{
text-decoration:underline;
}
#slidebox h2{
color:#E28409;
font-size:18px;
margin:10px 20px 10px 0px;
}
|
Вы можете адаптировать стиль этих элементов в соответствии с
вашим сайтом. Стиль крестика закрытия выглядит следующим образом:
|
a.close{
background:transparent url(../images/close.gif) no-repeat top left;
width:13px;
height:13px;
position:absolute;
cursor:pointer;
top:10px;
right:10px;
}
a.close:hover{
background-position:0px -13px;
}
|
Теперь, давайте добавим JavaScript для эффекта.
JAVASCRIPT
Во-первых, мы включаем библиотеку JQuery перед тегом конца
тела:
|
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
|
Затем добавим две функции. Одина из них, чтобы
определить, что мы достигли триггер
элемента при прокрутке и заставить окно выскользнуть. Другая функция заставляет
текстовое окно исчезать при нажатии на крестик закрытия.
|
<script
type="text/javascript">
$(function() {
$(window).scroll(function(){
var distanceTop = $('#last').offset().top - $(window).height();
if ($(window).scrollTop() >
distanceTop)
$('#slidebox').animate({'right':'0px'},300);
else
$('#slidebox').stop(true).animate({'right':'-430px'},100);
});
$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
</script>
|
Я надеюсь, вам понравился урок, и вы сможете его как-то
использовать!
ПОСМОТРЕТЬ
ДЕМО СКАЧАТЬ
ИСТОЧНИКА
Ссылка
на источник
| 
