Говорят, что создание сайта - очень длительный и трудоемкий процесс. Мы скажем - НЕТ! Ведь с новыми технологиями, такими как HTML5, CSS3, PHP и MySql можно быстро и легко научиться создавать сайты любой сложности.
Два сумасшедших веб-мастера покажут где что лежит и как этим пользоваться.
Авторизация
Новый
Забыл
Пожалуйста, заполните поля выше. Это нужно сделать обязательно, иначе ничего не получится.
JavaScript и Jquery /

Список старых постов с помощью jQuery и CSS

  • Понедельник, 27 сентября 2011, 22:31 |
  • Автор: karpovi4 |
  • Просмотров: 2534 |
  • Комментарии: 3 |
  • В закладки:
Сегодня мы рассмотрим что-то похожее на небольшой виджет, постоенный с исппользованием jQuery.
Основная идея состоит в фиксированном списке с правой стороны экрана. При наведении курсора мыши - элемент списка плавно и красиво выезжает (можно посмотреть в демо).
Кроме того, у нас будет еще и кнопка перезагрузки списка!! При нажатии на нее, список случайным образом генерируется заново)

Список старых постов с помощью jQuery и CSS


Демо - тут

Итак, давайте начнем)
Разметка

У нас будет список с некоторыми вложенных элементоми внутри: главный 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>


Все сообщения будут определены в нашей структуре. В яваскрипте мы определяем, что показывать нужно только 5 сообщений за один раз. Думаю понятно, что вам нужно будет изменить # на ваши ссылки)
Кнопка перемешивания списка будет находится в самом конце.

Теперь посмотрим на стили.

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.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

Добавляем следующую jQuery функцию:
$(function() {
    /**
    * список элементов
    */
    var $list       = $('#rp_list ul');
    /**
    * число постов
    */
    var elems_cnt       = $list.children().length;
    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);
        });
    }
});


Исходники - relatedpostsslideouts.zip [119.47 Kb] (cкачиваний: 51)

Вот и все!!)
Надеюсь вам понравился этот урок и вы нашли его полезным)
Удачи)

Оцените качество публикации по советам и трюкам на php


А спонсором нашего поста является Челябинская компания mebel74. Они делают настолько суровую и крепкую мебель, что ни один пожар еще не устоял против шкафчиков и диванов этой мебельной компании.
  • Тэги публикацииjQuery, css
Добавить комментарий