—»     —»   Скользящие блоки с похожими новостями с помощью jQuery и CSS3
  Раздел: Виджеты   Комментариев: 2  

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



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

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

Перед тем, как мы сами воспользуемся данным виджетом, спешим поделиться им с вами!

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

Разметка

Структура HTML-кода представляет собой список с несколькими ветками: основной div с миниатюрой, 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 пикселей, а также мы применим box-shadow:

.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 с заголовком будет оснащен inset-shadow:

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() {
    /**
    * 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);
        });
    }
});

Ну вот и все!

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

Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, CSS
Опубликовал Mysterious Master   Прочитано (раз): 6204   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 5 ноября 2010 @ 13:49
Написал: Drofa — группа: Читатели  
На сайте с: 1.10.2010   |   Публикаций: 0   |   Комментариев: 11
ICQ: 643208630
Очень доволен вашим ресурсом. Все излагается просто и в тему.Просто кладовая идей с фаршировкой тех-возможностей!!!
Комментарий #2: 5 ноября 2010 @ 14:01
Написал: Mysterious Master — группа: Администраторы  
На сайте с: 11.07.2009   |   Публикаций: 1491   |   Комментариев: 177
ICQ: --- не указано ---
Drofa, благодарим за положительный отзыв о нашей работе. Будем и далее радовать вас полезным материалом!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код




















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Январь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031