Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2013 » Август » 30 » ВСПЛЫВАЮЩЕЕ ОКНО В КОНЦЕ СТРАНИЦИ С JQUERY


08:06
ВСПЛЫВАЮЩЕЕ ОКНО В КОНЦЕ СТРАНИЦИ С JQUERY

ВСПЛЫВАЮЩЕЕ ОКНО В КОНЦЕ СТРАНИЦИ С 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>

 

 

Я надеюсь, вам понравился урок, и вы сможете его как-то использовать!

 

ПОСМОТРЕТЬ ДЕМО                 СКАЧАТЬ ИСТОЧНИКА

 

Ссылка на источник

Категория: CSS//HTML//JS | Просмотров: 701 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди