Создание выезжающих блоков связанных сообщений с помощью jQuery и CSS3

13 декабря 2013 | Опубликовано в css | 1 Комментарий »

Многие задаются вопросом, как показать посетителям больше своих работ. Обычно старые сообщения в блоге забываются, и даже если что-то все еще интересно и актуально, оно теряется в куче нового. Мы создадим небольшое приложение, которое может использоваться, чтобы показать связанные сообщения на каждой странице.

Основная задача – показать список, закрепленный с правой стороны экрана, с выглядывающими уменьшенными изображениями. Когда пользователь наводит указатель мыши на элементы, они выезжают, показывая название и две ссылки: одну для самой связанной статьи и вторую для примера. У нас дополнительно будет кнопка перемешивания под списком. После нажатия, сообщения в списке обновляются случайным образом.

Демо – Скачать исходный код

Итак, начнем!

Разметка

Структура HTML будет списком с вложенными элементами: главным блоком с уменьшенными изображениями, тэгом span для названия и тэгом span с двумя ссылками:

<div id="rp_list" class="rp_list">

    <ul>

        <li>

            <div>

                <img src="images/1.jpg" alt=""/>

                <span class="rp_title">Post Title</span>

                <span class="rp_links">

                    <a target="_blank" href="#">Article</a>

                    <a target="_blank" href="#">Demo</a>

                </span>

            </div>

        </li>

        ...

    </ul>

    <span id="rp_shuffle" class="rp_shuffle"></span>
</div>

Все связанные сообщения будут внесены в список в структуре. В JavaScript мы определим, что только 5 сообщений будут показываться одновременно. Конечно, Вам нужно заменить # Вашими ссылками. Перемешивающий тэг span будет расположен после списка.

Давайте рассмотрим стили.

CSS

Мы начнем с общих свойств стиля:

.rp_list {

    font-family:Verdana, Helvetica, sans-serif;

    position:fixed;

    right:-220px;

    top:40px;

    margin:0;

    padding:0;
}

Как Вы можете видеть, положение списка закреплено и всегда находится в одном и том же месте, когда пользователь прокручивает страницу. Мы сделаем значение положения отступа от правого края экрана отрицательным, в результате чего список будет спрятан.

После этого мы определим стиль перемешивающего тэга span:

span.rp_shuffle{

    background:#222 url(../images/shuffle.png) no-repeat 10px 50%;

    width:28px;

    height:14px;

    display:block;

    margin:10px 0px 0px 20px;

    cursor:pointer;

    padding:4px;

    border:1px solid #000;

    -moz-border-radius:5px 0px 0px 5px;

    -webkit-border-bottom-left-radius: 5px;

    -webkit-border-top-left-radius: 5px;

    border-bottom-left-radius: 5px;

    border-top-left-radius: 5px;
}

У списка будет следующий стиль:

.rp_list ul{

    margin:0;

    padding:0;

    list-style:none;
}

Элементы списка изначально не будут показаны:

.rp_list ul li{

    width: 240px;

    margin-bottom:5px;
    display:none;

У главных элементов будет следующий стиль:

.rp_list ul li div{

    display: block;

    line-height:15px;

    width: 240px;

    height: 80px;

    background:#333;

    border:1px solid #000;

    -moz-border-radius:5px 0px 0px 5px;

    -webkit-border-bottom-left-radius: 5px;

    -webkit-border-top-left-radius: 5px;

    border-bottom-left-radius: 5px;

    border-top-left-radius: 5px;
}

Уменьшенное изображение будет иметь размер 70 на 70 пикселей, и мы добавим к нему тень:

.rp_list ul li div img{

    width:70px;

    border:none;

    float:left;

    margin:4px 10px 0px 4px;

    border:1px solid #111;

    -moz-box-shadow:1px 1px 3px #000;

    -webkit-box-shadow:1px 1px 3px #000;

    box-shadow:1px 1px 3px #000;
}

У тэга span для названия будет внутренняя тень:

span.rp_title{

    font-size:11px;

    color:#ddd;

    height:46px;

    margin:4px 0px 0px 20px;

    display:block;

    text-shadow:1px 1px 1px #000;

    padding-top:3px;

    background:#222;

    -moz-box-shadow:0px 0px 5px #000 inset;

    -webkit-box-shadow:0px 0px 5px #000 inset;

    box-shadow:0px 0px 5px #000 inset;
}

У тэга span для ссылок будет следующий стиль:

span.rp_links{

    width:195px;

    height:8px;

    padding-top:2px;

    display:block;

    margin-left:42px;

}

span.rp_links a{

    background: #222 url(../images/bgbutton.png) repeat-x;

    padding: 2px 18px;

    font-size:10px;

    color: #fff;

    text-decoration: none;

    line-height: 1;

    -moz-box-shadow: 0 1px 3px #000;

    -webkit-box-shadow: 0 1px 3px #000;

    box-shadow:0 1px 3px #000;

    text-shadow: 0 -1px 1px #222;

    cursor: pointer;

    outline:none;

}

span.rp_links a:hover{

    background-color:#000;

    color:#fff;
}

И это все со стилями! Давайте добавим немного магии!

JavaScript

Основная задача – сначала показать 5 элементов полностью и затем быстро задвинуть их так, чтобы были видны только уменьшенные изображения. Это должно происходить, когда страница загружается. Это изящный способ показать пользователю, что что-то происходит, и он может взаимодействовать с этим элементом.

Когда мы наводим указатель мыши на элемент, мы заставим его выезжать до тех пор, пока он не будет виден полностью, показывая название и ссылки.

Функция перемешивания заставит появиться 5 случайных сообщений. Как Вы заметили, мы добавили все наши связанные сообщения в структуру html, и мы будем выбирать 5 из этих сообщений случайным образом. Этот метод не гарантирует нам, что следующий показываемый набор элементов не будет повторять предыдущий, но это простое решение.

Мы добавим следующие функции jQuery:

$(function() {

    /**   * Список сообщений   */

    var $list       = $('#rp_list ul');

    /**   * Количество связанных сообщений   */

    var elems_cnt       = $list.children().length;

    /**   * Показать первый набор сообщений.   * 200 – это изначальное значение левого внешнего отступа для списка элементов   */

    load(200);

    function load(initial){

        $list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');

        var loaded  = 0;

        //Показать 5 случайных сообщений из всего списка.

        //Убеждаемся в неповторяемости.

        while(loaded < 5){

            var r       = Math.floor(Math.random()*elems_cnt);

            var $elem   = $list.find('li:nth-child('+ (r+1) +')');

            if($elem.is(':visible'))

                continue;

            else

                $elem.show();

            ++loaded;

        }

        //Анимировать их.

        var d = 200;

        $list.find('li:visible div').each(function(){

            $(this).stop().animate({

                'marginLeft':'-50px'

            },d += 100);

        });

    }

    /**   * Наведение указателя мыши на элементы списка заставит их выехать.   */

    $list.find('li:visible').live('mouseenter',function () {

        $(this).find('div').stop().animate({

            'marginLeft':'-220px'

        },200);

    }).live('mouseleave',function () {

        $(this).find('div').stop().animate({

            'marginLeft':'-50px'

        },200);

    });

    /**   * Показать 5 случайных сообщений после нажатия на кнопку перемешивания   */

    $('#rp_shuffle').unbind('click')

                    .bind('click',shuffle)

                    .stop()

                    .animate({'margin-left':'-18px'},700);

    function shuffle(){

        $list.find('li:visible div').stop().animate({

            'marginLeft':'60px'

        },200,function(){

            load(-60);

        });

    }
});

И это все! Надеемся, Вам понравился этот урок, и он Вам пригодится!

Демо – Скачать исходный код

Автор урока Mary Lou
Перевод — Дежурка

Смотрите также:

Опубликовано в css, декабря 13, 2013
Метки: css, css3, css3 эффекты, Jquery, jquery плагины, верстка, урок css, урок css3, урок верстка, эффекты css

�

Создание выезжающих блоков связанных сообщений с помощью jQuery и CSS3

Разметка

CSS

JavaScript

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые