Cкроллер новостей для сайта с помощью XML Cкроллер новостей для сайта с помощью XML

 

Места на сайте не бывает много, его необходимо экономить, и организовывать на сайте все таким образом, чтобы на сайте оставалось достаточно места, и взор пользователя не терялся в поисках информации. Некоторые сайты предлагаю просмотреть свои популярные статьи, или последние которые были добавлены на сайт, обычно это выводиться простым списком, под статьей, который не особо бросается в глаза. В данном уроке мы рассмотрим простой анимированный скроллер новостей сайта с помощью xml.

 

ДЕМО
ИСХОДНИКИ

 

Скроллер позволит вам отображать последние новости, новинки продукции, объявления, события и многое другое в ограниченной области. Он также позволяет вам добавлять динамический контент в статичные страницы.

Для этого мы будем использовать vScroller – бесплатный скроллер новостей на XML, который отлично подойдет веб-сайтам и блогам. vScroller основан на jQuery и отображает контент в виде вертикальной скользящей ленты. Контент извлекается из стандартизированного XML-файла и оформляется за счет простого CSS3.

Шаг 1. XML

Для начала мы рассмотрим простую разметку, в которой мы будем размещать контейнеры с нашими новостями:

<?xml version="1.0" encoding="utf-8" ?>

<newslist title="ПОСЛЕДНИЕ НОВОСТИ:">

<news category="red" url="Ссылка" date="01-01-2011">
 <headline>Заголовок</headline>
 <detail>Описание</detail>
 </news>
 <news category="green" url="Ссылка" date="01-12-2011">
 <headline>Заголовок</headline>
 <detail>Описание </detail>
 </news>
 <news category="blue" url="Ссылка" date="01-22-2011">
 <headline>Заголовок</headline>
 <detail>Описание</detail>
 </news>
 <news category="yellow" url="Ссылка" date="01-24-2011">
 <headline>Заголовок</headline>
 <detail>Описание</detail>
 </news>
</newslist>

Основные функции:

* контент распределяется по категориям
* имеется поддержка более 4 различных категорий (можно разделять цветами: желтый, синий, красный, зеленый)
* настраиваемая скорость прокрутки
* отсутствие графических файлов / 100% код CSS
* кэширование в XML
* возможность настраивать время задержки контента перед переходом на следующий элемент

Шаг 2.  CSS

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

.news-wrapper
{
 margin-top: 100px;
 background-color: #333333;
 background: url(../images/bg.jpg);
}
.news-wrapper .news-contents-wrapper
{
 width: 400px;
 margin: auto;
 border-right: 1px dashed #6a6a6a;
 border-left: 1px dashed #6a6a6a;
 height: 350px;
}
.news-wrapper .news-contents
{
 overflow: hidden;
 position: relative;
 z-index: 998;
 height: 308px;
}
.news-wrapper .news
{
 width: 100%;
 height: 100px;
 color: #6a6a6a;
 position: absolute;
 z-index: 999;
 border-bottom: 1px dashed #6a6a6a;
}

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


🔖 Выбор по тегам ×

Top