От автора: Сегодня мы создадим jQuery скрипт предпросмотра новостей, позволяющий компактно показывать наши самые последние статьи или записи на сайте. Слайдер предпросмотра новостей на jQuery, будет демонстрировать определённый список статей слева и анонс данной статьи с более длинным описанием справа. Как только на новость слева щелкнут, сразу выскользнет анонс.
Перед тем, как мы приступим к созданию слайдера новостей на jQuery, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Давайте начнем с разметки.
Разметка слайдера анонсов новостей, на jQuery
У нас будет основной контейнер "cn_wrapper", содержащий правый элемент с классом "cn_preview" и левый – с классом "cn_list". Div анонса будет заключать элементы контента. Каждый из них содержит изображение анонса, название и описание наряду с несколькими фрагментами и ссылкой на саму статью.
В списке слева у нас будут соответствующие пункты кратких описаний. В конце этого контейнера мы также добавим навигацию для пошагового движения по страницам:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<div class="cn_wrapper"> <div id="cn_preview" class="cn_preview"> <div class="cn_content" style="top:5px;"> <img src="images/polaroidphotobar.jpg" alt=""/> <h1>Polaroid Photobar Gallery with jQuery</h1> <span class="cn_date">28/09/2010</span> <span class="cn_category">Tutorials</span> <p>In this tutorial we are going to create an...</p> <a href="//tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/" target="_blank" class="cn_more">Read more</a> </div> <div class="cn_content"> <img src="images/fullpageimagegallery.jpg" alt=""/> <h1>Full Page Image Gallery with jQuery</h1> <span class="cn_date">08/09/2010</span> <span class="cn_category">Tutorials</span> <p>In this tutorial we are going to create a stunning... </p> <a href="//tympanus.net/codrops/2010/09/08/full-page-image-gallery/" target="_blank" class="cn_more">Read more</a> </div> ... </div> <div id="cn_list" class="cn_list"> <div class="cn_page" style="display:block;"> <div class="cn_item selected"> <h2>Polaroid Photobar Gallery with jQuery</h2> <p>Tutorial on how to create a gallery in polaroid style</p> </div> <div class="cn_item"> <h2>Full Page Image Gallery with jQuery</h2> <p>Another tutorial on how to make a full gallery</p> </div> ... </div> <div class="cn_page"> ... </div> <div class="cn_page"> ... </div> <div class="cn_nav"> <a id="cn_prev" class="cn_prev disabled"></a> <a id="cn_next" class="cn_next"></a> </div> </div> </div> |
Первый элемент содержимого контейнера анонса уже будет иметь стиль к моменту прокрутки, а именно отступ сверху 5 px. Все остальные анонсы скрыты "hidden", потому что у них будет отступ сверху на 310 px.
Список элементов будет разделен на страницы, каждая из которых содержит самое большее 5 пунктов.
Давайте посмотрим на стиль.
CSS
Для создания нескольких изящных эффектов мы используем множество свойств CSS3. Мы применим тени, закругленные края и градиенты как с RGB, так и с шестнадцатеричными значениями.
Давайте начнем с основного контейнера. Мы установим его относительно, чтобы затем можно было внутри него использовать абсолютное позиционирование:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.cn_wrapper{ margin:90px auto 0px auto; width:500px; height:300px; position:relative; color:#fff; overflow:hidden; padding:5px; text-shadow:1px 1px 1px #000; border:1px solid #111; background-color:#333; -moz-box-shadow:1px 1px 4px #222; -webkit-box-shadow:1px 1px 4px #222; box-shadow:1px 1px 4px #222; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } |
Заголовки внутри нашей программы просмотра получат следующий стиль:
|
1 2 3 4 5 6 7 8 9 10 |
.cn_wrapper h1{ font-size:20px; text-transform:uppercase; } .cn_wrapper h2{ font-size:12px; border-bottom:1px solid #000; padding-bottom:4px; text-transform:uppercase; } |
В списке программы просмотра используется h2, и мы передаем ему нижнюю границу для создания под ним красивой «выгравированной» линии. Это сработает, потому что мы передадим p, следующему за ним, верхнюю границу более светлого цвета.
И анонс, и список будут позиционированы абсолютно, так что мы сначала определим общий стиль, а затем будем перезаписывать атрибут left для каждого анонса:
|
1 2 3 4 5 6 7 8 9 10 |
.cn_preview, .cn_list{ width:250px; height:300px; position:absolute; top:2px; left:6px; } .cn_preview{ left:255px; } |
Внутри анонса у нас будет несколько элементов содержимого, у которых будут следующие стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.cn_content{ border:1px solid #444; top:310px;/*5*/ left:5px; width:219px; padding:10px; position:absolute; background-color:#101010; height:275px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } |
Эти элементы будут анимированы с помощью JavaScript. Вначале нам нужно их скрыть, так что определяем отступ сверху (top) больше обертывающего (основного) div-a. Вот почему мы устанавливаем overflow обертывающего (основного) div-a как скрытое (hidden) так, чтобы не видеть ничего, выходящего за его границы.
Теперь назначим стили элементам внутри div’а content.
Изображение в нашем случае всегда будет максимальной ширины 215 px. Обратите вниманием, что если у вас изображение другого размера, вам придется под него подогнать все элементы. В этом случае высота изображения будет 119 px. Это значение, на котором мы будем базировать высоту следующих элементов.
|
1 2 3 4 5 6 |
.cn_content img{ width:215px; -moz-box-shadow:1px 1px 4px #000; -webkit-box-shadow:1px 1px 4px #000; box-shadow:1px 1px 4px #000; } |
Дата и категория будут позиционированы абсолютно внизу div’а content:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.cn_date{ position:absolute; bottom:30px; right:8px; font-size:11px; } .cn_category{ position:absolute; bottom:30px; left:8px; font-size:11px; padding:1px 3px; background:#ccc; border:1px solid #ddd; color:#000; text-shadow:-1px 0px 1px #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } |
Описание, являющееся элементом p, будет иметь фиксированную высоту, а если оно длиннее, то будет обрезано:
|
1 2 3 4 5 |
.cn_content p{ height:57px; margin-top:2px; overflow:hidden; } |
Кнопка more (далее), которая будет ссылкой на исходную статью, будет снабжена градиентом, тенью и закругленными границами внизу слева и справа, чтобы подходить к содержимому:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
a.cn_more{ position:absolute; padding: 4px 0px; left:0px; bottom:0px; width:236px; color:#fff; text-align:center; font-size:12px; letter-spacing:1px; text-shadow:1px 1px 1px #011c44; text-transform:uppercase; text-decoration: none; border:1px solid #4c7ecb; outline:none; cursor:pointer; background-color: #1951A5; background-image: -moz-linear-gradient( top, rgba(255,255,255,0.25), rgba(255,255,255,0.05) ); background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgba(255,255,255,0.25)), color-stop(1, rgba(255,255,255,0.05)) ); -moz-border-radius: 0px 0px 5px 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -border-bottom-left-radius: 5px; -border-bottom-right-radius: 5px; -moz-box-shadow:1px 1px 3px #111; -webkit-box-shadow:1px 1px 3px #111; box-shadow:1px 1px 3px #111; } |
Смена цвета шрифта при проведении мышью создаст красивый объемный эффект:
|
1 2 3 4 |
a.cn_more:hover{ color: #011c44; text-shadow: 1px 1px 1px #ccdffc; } |
Теперь мы определим стили пунктам списка. У них в качестве фона будет градиент, меняющийся при проведении над ним мышью (hover). К выбранному пункту мы также применим эффект hover.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
.cn_item{ border:1px solid #090909; cursor:pointer; position:relative; overflow:hidden; height:49px; color:#fff; padding:5px; margin:6px 5px 0px 0px; text-shadow:1px 1px 1px #000; background:#2b2b2b; background: -webkit-gradient( linear, left top, left bottom, from(#171717), to(#2b2b2b) ); background: -moz-linear-gradient( top, #171717, #2b2b2b ); -moz-box-shadow:1px 1px 3px #111; -webkit-box-shadow:1px 1px 3px #111; box-shadow:1px 1px 3px #111; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } .cn_item:hover, .selected{ border-color:#4c7ecb; background-color: #1951A5; background-image: -moz-linear-gradient( top, rgba(255,255,255,0.25), rgba(255,255,255,0.05) ); background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgba(255,255,255,0.25)), color-stop(1, rgba(255,255,255,0.05)) ); } |
«Гравированная» линия под заголовком, кроме того, будет менять цвет:
|
1 2 3 4 5 6 7 8 9 10 |
.cn_item:hover h2, .cn_list .selected h2, .cn_item:active h2{ border-color:#2C5FAC; } .cn_item:hover p, .cn_list .selected p, .cn_item:active p{ border-color:#527CBB; } |
Псевдокласс active, например, при щелчке на пункт списка получит эффект выгравированного текста при помощи следующего стиля:
|
1 2 3 4 |
.cn_item:active { color: #011c44; text-shadow: 1px 1px 1px #ccdffc; } |
Короткое описание в пункте списка будет иметь фиксированную высоту и верхнюю границу, которые в сочетании с нижней границей h2 создадут линию, которая смотрится как гравированная:
|
1 2 3 4 5 6 |
.cn_list p{ height:29px; padding-top:2px; overflow:hidden; border-top:1px solid #333; } |
Теперь давайте присвоим стили навигации. Мы установим ее абсолютно внизу своего контейнера списка:
|
1 2 3 4 5 6 7 |
.cn_nav{ width:55px; height:24px; position:absolute; bottom:0px; left:94px; } |
У следующего и предыдущего элементов будет следующий общий стиль:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
a.cn_next, a.cn_prev{ float:left; height:23px; width:23px; background-color:#212121; background-repeat:no-repeat; background-position:center center; cursor:pointer; outline:none; border:1px solid #111; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } |
Теперь мы только установим индивидуальные стили, которые являются фоновыми изображениями:
|
1 2 3 4 5 6 7 |
a.cn_next{ background-image:url(../images/next.png); } a.cn_prev{ margin-right:5px; background-image:url(../images/prev.png); } |
При проведении мышью мы просто меняем цвет фона:
|
1 2 3 |
.cn_nav a:hover{ background-color:#101010; } |
При щелчке по пункту навигации мы сдвигаем его вниз на 1 px, таким образом он смотрится нажатым. Это можно сделать, установив верхнее поле на 1px:
|
1 2 3 4 |
.cn_nav a:active{ margin-top:1px; background-color:#000; } |
У неактивного элемента навигации непрозрачность будет 0.5:
|
1 2 3 |
.cn_nav a.disabled{ opacity:0.5; } |
Последнее, что нам нужно определить – чтобы страницы списка не были видны. Потом мы сделаем их видимыми в JavaScript:
|
1 2 3 |
.cn_page{ display:none; } |
Вот и весь стиль. Теперь давайте с помощью jQuery добавим эффекты!
JavaScript
Для создания эффектов мы используем easing, так что не забудьте включить jQuery плагин easing.
В jQuery мы начнем с определения нескольких переменных:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
//caching //кнопки «вперед» и «назад» var $cn_next = $('#cn_next'); var $cn_prev = $('#cn_prev'); //обертка для левых пунктов var $cn_list = $('#cn_list'); var $pages = $cn_list.find('.cn_page'); //количество страниц var cnt_pages = $pages.length; //по умолчанию номер страницы = 1 var page = 1; //список новостей (левые пункты) var $items = $cn_list.find('.cn_item'); //текущий пункт просматриваем справа var $cn_preview = $('#cn_preview'); //номер пункта в просмотре. //по умочанию первый пункт var current = 1; |
Для каждого элемента сохраняем его индекс относительно всего документа. Привязываем событие щелчка (click), которое заставляет текущий или нажатый элемент скользить вверх или вниз. В зависимости от текущего элемента (следует ли он до или после последнего нажатого), нажатый будет сдвигаться вверх или вниз:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
$items.each(function(i){ var $item = $(this); $item.data('idx',i+1); $item.bind('click',function(){ var $this = $(this); $cn_list.find('.selected').removeClass('selected'); $this.addClass('selected'); var idx = $(this).data('idx'); var $current = $cn_preview.find('.cn_content:nth-child('+current+')'); var $next = $cn_preview.find('.cn_content:nth-child('+idx+')'); if(idx > current){ $current.stop() .animate({ 'top':'-300px' },600,'easeOutBack',function(){ $(this).css({'top':'310px'}); }); $next.css({ 'top':'310px' }).stop() .animate({ 'top':'5px' },600,'easeOutBack'); } else if(idx < current){ $current.stop() .animate({ 'top':'310px' },600,'easeOutBack',function(){ $(this).css({'top':'310px'}); }); $next.css({ 'top':'-300px' }).stop() .animate({ 'top':'5px' },600,'easeOutBack'); } current = idx; }); }); |
Теперь определим, что происходит, когда в навигации щелкают на next (следующая). Следующая страница должна постепенно проявиться, если она существует, или же нужно деактивировать кнопку, если следующей страницы не существует:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$cn_next.bind('click',function(e){ var $this = $(this); $cn_prev.removeClass('disabled'); ++page; if(page == cnt_pages) $this.addClass('disabled'); if(page > cnt_pages){ page = cnt_pages; return; } $pages.hide(); $cn_list.find('.cn_page:nth-child('+page+')').fadeIn(); e.preventDefault(); }); |
И то же самое для предыдущей страницы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$cn_prev.bind('click',function(e){ var $this = $(this); $cn_next.removeClass('disabled'); --page; if(page == 1) $this.addClass('disabled'); if(page < 1){ page = 1; return; } $pages.hide(); $cn_list.find('.cn_page:nth-child('+page+')').fadeIn(); e.preventDefault(); }); |
Чтобы все выглядело еще лучше, мы добавляем в заголовок HTML следующие строки, используя модуль cufon-yui.js:
|
1 2 3 4 5 6 7 |
<script src="js/cufon-yui.js" type="text/javascript"></script> <script src="js/Bebas_400.font.js" type="text/javascript"></script> <script type="text/javascript"> Cufon('.cn_wrapper h1,h2', { textShadow: '-1px 1px black' }); </script> |
На этом мануал по созданию плагина слайдера новостей на jQuery окончен. Надеемся, что вам этот учебник понравился и оказался полезным!!
Автор: Mary Lou
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
E-mail: contact@webformyself.com
Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения
P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.
Комментарии (14)