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

Всегда в теме

Статистика


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

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

Свежий софт


Wrecker Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Wrecker Virtual DJ
Virtual DJ
Wrecker SoundForge 11
SoundForge 11
Wrecker Alcohol 120
Alcohol 120
Wrecker Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Рекомендуем



Главная » 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 | Просмотров: 1099 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

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

    • Читаемое

    Категории

    Заходи не жди

    Web Template created with Artisteer.