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

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

Итак, давайте начнем!

РАЗМЕТКА

HTML структура будет содержать  список с некоторыми вложенными элементов внутри: основной блок с миниатюрами:

<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 сообщений за раз. Конечно, вам нужно заменить #  вашими ссылками. 

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

CSS

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

.rp_list {

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

    position:fixed;

    right:-220px;

    top:40px;

    margin:0;

    padding:0;

}

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

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.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.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 пунктов во всю ширину и сразу убрать  их до миниатюр. Это должно случиться, когда мы загрузим страницу. Этот аккуратный эффект для того, чтобы показать пользователю, что там что-то находиться, и что он может взаимодействовать с этим элементом.

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

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

$(function() {

    /**

    * the list of posts

    */

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

    /**

    * number of related posts

    */

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

    /**

    * show the first set of posts.

    * 200 is the initial left margin for the list elements

    */

    load(200);

    function load(initial){

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

        var loaded  = 0;

        //show 5 random posts from all the ones in the list.

        //Make sure not to repeat

        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;

        }

        //animate them

        var d = 200;

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

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

                'marginLeft':'-50px'

            },d += 100);

        });

    }

    /**

    * hovering over the list elements makes them slide out

    */

    $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);

    });

    /**

    * when clicking the shuffle button,

    * show 5 random posts

    */

    $('#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);

        });

    }

});

Мы надеемся, что вам понравился этот урок, и он был для вас полезным!

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

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