В общем, смотрим:
DEMO
Если понравилось, приступаем к установке, все очень просто и не займет много времени.
HTML код его выглядит так:
<div id="wrapper">
<!--Блок(список) элементов прокрутки-->
<ul id="sroll-block">
<li>Блок №1</li>
<li>Блок №2</li>
<li>Блок №3</li>
<li>Блок №4</li>
</ul>
<!--Блок ссылок-кнопок управления-->
<p><a href="#" id="previous">Предыдущие</a>/<a href="#" id="next">Следующие</a>/<a id="stop" href="#">Остановить</a>/<a id="start" href="#">Продолжить</a></p>
</div>
В данном случаи плагином осуществляется вертикальная авто-прокрутка элементов списка, но думаю не проблема прокручивать любые другие блоки.<!--Блок(список) элементов прокрутки-->
<ul id="
<li>Блок №1</li>
<li>Блок №2</li>
<li>Блок №3</li>
<li>Блок №4</li>
</ul>
<!--Блок ссылок-кнопок управления-->
<p><a href="#" id="
</div>
Блок с ссылками управления можно разместит и сверху, а можно и разделить, как это сделано в DEMO. Если данный блок не нужен, его можно не добавлять вовсе.
С помощью стилей легко оформить весь блок и его отдельные элементы по своему усмотрению. При желании возможно придать ссылкам управления вид кнопок, используя для этого уже имеющиеся идентификаторы, настроить количество видимых блоков прокрутки от одного (Пример 1) до нескольких (Пример 2). Вот CSS используемый на DEMO странице для "Пример 1":
#wrapper{
padding: 30px;
width: 270px;
margin: 0 auto; /*выравнивание всего блока*/
}
#wrapper p {
text-align: center;
}
#wrapper p a {
color:#f27b00;
text-decoration: none;
}
#wrapper p a :hover {
color:#eab219;
}
#sroll-block{
height: 200px; /*высота всего блока*/
overflow: hidden;
margin:0;
padding: 0;
}
#sroll-block li{
display: block;
background: #efefef;
color: #333;
padding: 15px 5px; /*внутренние отступы*/
border-bottom: 1px solid #ddd;
text-align: center;
font: normal bold 25px/50px Helvetica, Tahoma, serif;
height: 170px; /*высота элемента прокрутки*/
}
padding: 30px;
width: 270px;
margin: 0 auto; /*выравнивание всего блока*/
}
#wrapper p {
text-align: center;
}
#wrapper p a {
color:#f27b00;
text-decoration: none;
}
#wrapper p a :hover {
color:#eab219;
}
#sroll-block{
height: 200px; /*высота всего блока*/
overflow: hidden;
margin:0;
padding: 0;
}
#sroll-block li{
display: block;
background: #efefef;
color: #333;
padding: 15px 5px; /*внутренние отступы*/
border-bottom: 1px solid #ddd;
text-align: center;
font: normal bold 25px/50px Helvetica, Tahoma, serif;
height: 170px; /*высота элемента прокрутки*/
}
В данном случаи, при настройке размеров блока необходимо учитывать что полная высота всего блока должна быть равной высоте элемента прокрутки + верхний и нижний внутренние отступы.
В данном случаи это: 200px = 170px + 15px + 15px;
В данном случаи это: 200px = 170px + 15px + 15px;
CSS в "Пример 2" для идентификаторов #sroll-block и #sroll-block li:
#sroll-block{
height:300px; /*высота всего блока*/
overflow:hidden;
margin:0;
padding:0;
}
#sroll-block li{
display: block;
background: #efefef;
color: 333;
padding: 15px 5px;
border-bottom: 1px solid #ddd;
text-align: center;
font: normal bold 25px/50px Helvetica, Tahoma, serif;
height: 70px; /*высота элемента прокрутки*/
}
height:300px; /*высота всего блока*/
overflow:hidden;
margin:0;
padding:0;
}
#sroll-block li{
display: block;
background: #efefef;
color: 333;
padding: 15px 5px;
border-bottom: 1px solid #ddd;
text-align: center;
font: normal bold 25px/50px Helvetica, Tahoma, serif;
height: 70px; /*высота элемента прокрутки*/
}
Здесь полная высота элемента прокрутки составляет 100px (70px + 15px + 15px), а высота всего блока 300px и в этом случаи будут постоянно видны 3 элемента, но прокрутка осуществляется на один блок как и прежде
Но для того чтобы заставить блок работать нужно добавить на сайт скрипты плагина и опций настройки. Не забываем о наличии подключенной к сайту библиотеки jQuery.
Файл скрипта плагина есть в архиве исходника, который можно скачать в конце статьи, остается лишь залить его к себе на хостинг и взять ссылку. Куда интересней скрипт настройки, который для "Пример 2" выглядит так:
$(function(){
$('#sroll-block').totemticker({
row_height : '100px', /*высота прокрутки*/
next : '#next',
previous : '#previous',
stop : '#stop',
start : '#start',
speed : 800, /*скорость прокрутки в миллисекундах*/
interval : 4000, /*время паузы(задержки)*/
mousestop : true, /*останавливать при наведении курсора - true (да) / false (нет)*/
});
});
$('#sroll-block').totemticker({
row_height : '100px', /*высота прокрутки*/
next : '#next',
previous : '#previous',
stop : '#stop',
start : '#start',
speed : 800, /*скорость прокрутки в миллисекундах*/
interval : 4000, /*время паузы(задержки)*/
mousestop : true, /*останавливать при наведении курсора - true (да) / false (нет)*/
});
});
Значение в скрипте для row_height необходимо указывать равное полной высоте элемента прокрутки (#sroll-block li)
Для того что бы сделать вертикальную автопрокрутку элементов уже имеющегося блока достаточно лишь указать его идентификатор(селектор) в скрипте настроек вместо #sroll-block.
$(function(){
$('#sroll-block').totemticker({
***
});
$('#sroll-block').totemticker({
***
});
СКАЧАТЬ ZIP
Источник: Totem: A Vertical Ticker jQuery Plugin
Вот собственно и все. Обсуждаем не стесняемся.
©http://magentawave.com
Годный плагин. Правда документации не хватает. Например инфы о том, что придётся ловить величину прокрутки чтобы не было рывков и что параметр speed должен быть меньше interval. Или я всё это пропустил?
ОтветитьУдалитьСпасибо за коммент. Про высоту написано в замечании со значком "Внимание" в конце статьи - это именно об этом, про speed и interval, думаю это и так понятно, но после вашего комментария вопросов уже не возникнет, так что еще раз спасибо.
Удалить