О проектеГостеваяКарта сайта

Предложишь лучшее решение - получишь 100 рублей!

Вертикальная прокрутка текста (блоков) на jQuery

Иногда необходимо "прокручивать" на сайте большое количество информации в каком-то небольшом блоке ("диве").

С этой задачей поможет справиться следующий скрипт!

Пример обрабатываемого кода


Подключаем jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
И наш скрипт
<script type="text/javascript" src="/jquery.totemticker.js"></script>
скачать можно тут http://snipcode.ru/exemple/js/jquery.totemticker.js

Решение

немного приукрасим Well
CSS

<style type="text/css">
#wrapper{
        padding:30px;
        width:300px;
        margin:0 auto;
}
 
#vertical-ticker{
        height:300px;
        overflow:hidden;
        margin:0; padding:0;
        -webkit-box-shadow:0 1px 3px rgba(0,0,0, .4);
}
 
#vertical-ticker li{
        padding:35px 20px;
        display:block;
        background:#efefef;
        color:#333;
        border-bottom:1px solid #ddd;
        text-align:center;
        font-size:25px;
        font-weight:bold;
        font-family: Helvetica Neue, times, serif;
}
</style>
 

где-нибудь на странице, перед выводом нашего блока вставляем
 
Javascript

<script type="text/javascript">
$(function(){
        $('#vertical-ticker').totemticker({
                row_height :    '100px',
                next :  '#ticker-next', // id элемента
                previous :      '#ticker-previous', // id элемента
                stop'#stop', // id элемента
                start : '#start', // id элемента
                mousestop :     true, // останавливать ли движение при наведении мышки
                speed :   300, // скорость прокрутки
                interval :      1000, // пауза между перемещениями элементов
        });
});
</script>
 

Ну и сам html код нашего блока, элементы которого мы будем вертикально прокручивать
 
HTML

<div id="wrapper">
        <ul id="vertical-ticker">
                <li>Первый пошел!</li>
                <li>Второй пошел!</li>
                <li>Третий пошел!</li>
                <li>Четвертый пошел!</li>
                <li>Пятый пошел!</li>
                <li>Шестой!!!</li>
                <li>Ну и т.д. и т.п.</li>
        </ul>
        <p><a href="#" id="ticker-previous">Вперед</a> /
                <a href="#" id="ticker-next">Назад</a> /
                <a id="stop" href="#">Стоп</a> /
                <a id="start" href="#">Поехали</a></p>
</div>
 

Работет это вот так вот:

Автор: Zach Dunn

Демо работы функции

  • Первый пошел!
  • Второй пошел!
  • Третий пошел!
  • Четвертый пошел!
  • Пятый пошел!
  • Шестой!!!
  • Ну и т.д. и т.п.

Назад / Вперед / Стоп / Поехали


Рейтинг:

Теги: jQuery вертикальная прокрутка блок

Если вы знаете более оригинальное, красивое, ЛУЧШЕЕ решение этой задачи, у вас есть шанс заработать 100 рублей!!! Если ваше решение будет признано лучшим, деньги ваши! Мы гарантируем выплату!

Всего 4 комментария

< !-- @form -- >

Подписаться на новые комментарии?

%form_captcha%

*Обзазательны для заполнения

PHP

 

Последние комментарии
  • phpguru

    Функция отличная только надо бы добавить для utf8 кодировку обработать строку, а то не все понимают как сделать подобное!
    $str = iconv_strlen($str,'UTF-8');
    Я так считаю!
    13-12-2013 в 12:59:38 ID# 454 посмотреть...


  • SnipCode.ru

    Возможно Вы правы, непонятно только зачем тут iconv_strlen (((
    13-12-2013 в 13:02:55 ID# 455 посмотреть...


  • Сергей

    поторопился, так надо в конце, пардон.
        return $v['pass'];
        }
    return FALSE;
    }

    02-12-2013 в 23:33:41 ID# 377 посмотреть...


  • Сергей

    Думаю все же логичней использовать foreach, т.к. можно промахнуться с ключами, а если массив ассоциативный (я раньше делал ключ = дата и время регистрации), то вообще работать не будет.
     
    function search($array,$login)
    {
       foreach ($array as $k=>$v)
        if($v['login'] == $login){
        return $v['pass'];
        }
    }
    return FALSE;
    Так, на минутку.
    Время исполнения смысла не имеет, авторизация используется 1 раз, если юзер не параноик)))

    02-12-2013 в 23:33:41 ID# 376 посмотреть...


  • Пабло

    Как сделана ваша система рейтинга,с учетом количеством людей,проголосовавших?
    11-11-2013 в 17:04:39 ID# 207 посмотреть...


  • SnipCode.ru

    ну...вобщем то все просто: берем общую оценку, делим на кол-во проголосовавших, получаем рейтинг
    11-11-2013 в 17:07:06 ID# 208 посмотреть...


  • Пабло

    Да,просто у меня возникли проблемы,при сохранении данных,в бд и отображение количество проголосовавших людей,у вас где нибудь на сайте описано как это сделано или будет?
     
    Мне нужна система рейтинга точно такая же как у вас=)
    11-11-2013 в 17:10:56 ID# 209 посмотреть...


  • KorniloFF

    Приведенный код обрезает до первой точки в строке, в случае, если в ней будет их несколько, что не соответствует теме.
    Вот код, обрезающий до последней точки:

    PHP

    $title= preg_replace("/([\s\S.]+)\.\w+$/","$1",$str)
     

    10-11-2013 в 10:45:29 ID# 205 посмотреть...


  • Виктор

    Все отлично работает! Извините , у меня есть задача отрезать после второй и до второй запятой , что нужно поправить в первом примере?
    Спасибо!
    30-09-2013 в 20:34:07 ID# 204 посмотреть...