Сменяющийся текст скрипт jQuery

Попробую ответить на очередной интересный вопрос:
Я тут подглядел на новостном сайте BBC Russian такую фишку: плавно появляющиеся в верхней части сайта заголовки новостей. Замечу, очень плавно и естественно, без дрожи, присущей обычной бегущей строке.
Реализацию данного эффекта я увидела на сайте www.htmldrive.net.

Шаг 1. После <head> добавляем
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function($){
  $.fn.list_ticker = function(options){
    
    var defaults = {
      speed:4000,
   effect:'slide',
   run_once:false
    };
    
    var options = $.extend(defaults, options);
    
    return this.each(function(){
      
      var obj = $(this);
      var list = obj.children();
      var count = list.length - 1;

      list.not(':first').hide();
      
      var interval = setInterval(function(){
        
        list = obj.children();
        list.not(':first').hide();
        
        var first_li = list.eq(0)
        var second_li = list.eq(1)
  
  if(options.effect == 'slide'){
   first_li.slideUp();
   second_li.slideDown(function(){
    first_li.remove().appendTo(obj);
    
   });
  } else if(options.effect == 'fade'){
   first_li.fadeOut(function(){
    obj.css('height',second_li.height());
    second_li.fadeIn();
    first_li.remove().appendTo(obj);
   });
  }
  
  count--;
  
  if(count == 0 && options.run_once){
   clearInterval(interval);
  }
  
      }, options.speed)
    });
  };
})(jQuery);
//]]>
 </script>
<script type='text/javascript'>
 $(document).ready(function(){
  $(&#39;#fade&#39;).list_ticker({
   speed:5000,
   effect:&#39;fade&#39;
  });
  $(&#39;#slide&#39;).list_ticker({
   speed:5000,
   effect:&#39;slide&#39;
  });  
})
 </script>
, где speed:5000 - это время изменения записей.

Шаг 2. В то место, где необходимо разместить список, указываем:
Для эффекта 'fade'
<ul id="fade">
<li style="display: list-item;">Раз</li>
<li style="display: none;">Два</li>
<li style="display: none;">Три</li>
<li style="display: none;">Четыре</li>
<li style="display: none;">Пять</li>
</ul>

Для эффекта 'slide'
<ul id="slide">
<li style="display: list-item;">Раз</li>
<li style="display: none;">Два</li>
<li style="display: none;">Три</li>
<li style="display: none;">Четыре</li>
<li style="display: none;">Пять</li>
</ul>

Для платформы Blogger.

Автоматизировать процесс добавления свежих записей можно, используя гаджет "Blog List". Для осуществления данного эффекта пропускаем шаг 2, а в коде шага 1 меняем строку
  $(&#39;#fade&#39;).list_ticker({
на
  $(&#39;#BlogList1_blogs&#39;).list_ticker({
в f t
наверх ↑

30 комментариев:

Serebro
Очаровательно! Долго искал что-то подобное, слышал что на jQuery реализуется, а вот не попадалось. Спасибо за своеобразный "ликбез". Только непосредственно в боковой колонке данный скрипт именно с эффектом "slide", как мне кажется, немного не гармонирует из-за постоянно разъезжающегося блока, а в некоторых случаях может и раздражать читателя, пытающего кликнуть в такие моменты по ссылкам ниже.
NMitra
Мне также fade больше по вкусу. Если slide в тексте странице, то вся страница "подпрыгивает".
Serebro
Да, особенно инфантильно он смотрится в браузерах на движке Trident - в IE, например, когда как "fade" вполне даже терпимо, в том же Explorer'е, правда без плавного перехода, конечно же...
Анонимный
Видел тут на одном блоге, кое-что ....вот адрес www.russia-football.blogspot
Наталья, если Вам не сложно можете ли Вы подсказать, как можно сделать картинку в верху сайта, да так, чтобы на ней был виден текст (при наведении курсора).

P.S Пардон, если не здесь пишу...
NMitra
Посмотрите тут - http://shpargalkablog.ru/2011/04/css-nalozhenie.html. И теория, и практика.
Святослав
slide, тянет почему то ваш сайдбар при изменении записи.
NMitra
Есть две причины:
1)блоки записей не равной высоты. Более верно было бы задать одинаковое значение в height, а также указать overflow: hidden.
2)slide действительно затрагивает другие элементы. Верное его использование - ниже других блоков.
Serebro
Здравствуйте, Наталья! Увы, это снова я. Недалече я радовался отъезду любимой тещи и возможности применить более-менее человеческое текстовое слайд-шоу в блоггере, не требующее огромных добавлений в шаблон блога, и вот я разочарован. Теща обещала вернуться, а по поводу слайд-шоу обнаружилась досадная неприятность. Оказывается, нельзя применить одновременно несколько блоков с одним и тем же эффектом. Как я понимаю, причина в уникальности имени одного из атрибутов (fade, slide), вследствие чего их повторение отображается некорректно. На сайте-источнике не получилось разобраться в этом, да и очень лень вникать в албанский да жать переводчик. Существует ли возможность изменить превратности судьбы и добавить в скрипт какой-нибудь новый атрибут, владеющий схожим эффектом, допустим, того же fade, но просто имеющий другое имя-идентификатор, дабы появилось счастье лицезреть в блоге несколько информативных виджетов с эффектом fade? Либо есть другие более легкие пути по предотвращению этой нелепости?
Прошу прощения за много букв и невнятное объяснение, но надеюсь проблема вам будет понятна.
NMitra
Здравствуй! Добавляем ещё один индефикатор:

<script type='text/javascript'>
 $(document).ready(function(){
  $(&#39;#fade&#39;).list_ticker({
   speed:5000,
   effect:&#39;fade&#39;
  });
  $(&#39;#fade-dva&#39;).list_ticker({
   speed:5000,
   effect:&#39;fade&#39;
  });
})
 </script>

Тогда

<ul id="fade-dva">
<li style="display: list-item;">Первый</li>
<li style="display: none;">Второй</li>
<li style="display: none;">Третий</li>
<li style="display: none;">Четвёртый</li>
<li style="display: none;">Пятый</li>
</ul>
Serebro
Спасибо огромное! Да, это именно то что было нужно. Эх, мои два класса образования, все гениальное, оказывается, по-прежнему просто до безобразия:) Вы как всегда чудесны)
NMitra
Верно. Спасибо)
Fm55
Ребят кто нить пробовал прикрутить к DLE данный скрипт и возможно ли это ? Мне нужно создать блок например на фоне логотипа и что бы там при каждом обновлении выводился разный текст
NMitra
Боюсь, что именно с особенностями у DLE не смогу помочь.

Самый простейший вариант изменения текста при обновлении страницы:

<script>
var rnd = Math.floor(Math.random()*3);
if(rnd == 0) {document.write('Текст 1');}
if(rnd == 1) {document.write('Текст 2');}
if(rnd == 2) {document.write('Текст 3');}
</script>
Река Вечной Жизни
Привет! А как мне сделать в slide просто меняющиеся определённые фразы
NMitra
Привет.

Создаём гаджет "Список", куда вносим необходимый текст в "Добавить элемент списка" с помощью кнопки "Добавить элемент".

Вместо шага 2. В коде шаблона пишем id='slide'. Итог:

<b:widget id='TextList1' locked='false' title='' type='TextList'>
<b:includable id='main'>
 <h2><data:title/></h2>
 <div class='widget-content'>
   <ul id='slide'>
     <b:loop values='data:items' var='item'>
       <li><data:item/></li>
     </b:loop>
   </ul>
Руслан
Спасибо конечно, но чёт не фурычит. Либо я чёт не то делаю, либо одно из двух. Ну а за внимание спасибо БОЛЬШОЕ
NMitra
Похоже вам всё же удалось реализовать)) Хотя fade мне больше импонирует.
NMitra
Вот только список ul нужно поместить в body.

Все свои рекомендации сначала тестирую на пробном блоге. Попробуйте снова проделать действия комментария 15 и отписаться, я посмотрю где кроется возможная ошибка. Я когда его писала, чуяла что некоторые моменты не досказала. Например, что в "Список" нужно вписать несколько строк, а не одной линией.
Alex Zest
я вообще не понимаю зачем вы пользуетесь jQuery?
-- только из-за того что все им пользуются и он очень моден!!!!

Выражение $('поисковый селектор') на пресловутом jQuery - элементарно заменяется типовым DOM вызовом document.querySelector('поисковый селектор')
** результат одинаковый
http://bug-zest.blogspot.ru/2011/09/gecko-6.html
NMitra
Ух, первая запись в 2000 году!!!

Так-то я предпочитаю чистый CSS и её свойство animation. JS я знаю на уровне младенца, а тем более библиотеки, на подобии jQuery.

Я понимаю, что если нужно сделать один элемент, то подключать всю библиотеку не имеет смысла. И то, что благодаря всеобщей распространенности, весь скрипт плотно сидит в кэше у пользователей и не так сильно влияет на скорость загрузки страницы.
Володя
Здравствуйте! Скажите, пожалуйста, а как подобную методику обновления информации можно применить к простому текстовому файлу, который постоянно дополняется в режиме реального времени? ( в конец файла добавляются строки)
NMitra
Через PHP. Например, как в этих комментариях http://shpargalkablog.ru/2013/05/reviews-php.html Возможно я неверно поняла вопрос.
Егор Желудков
К комментарию №15
Спасибо, заработало.
А как убрать точку, которая обозначает элемент списка? Сделать просто смену фраз, к примеру?
Егор Желудков
И важное: есть возможность убрать появление всех элементов списка в момент загрузки страницы? Он сначала показывает все, что есть, а потом выбирает элементы по очереди и начинает их показывать)
NMitra
Попробуйте добавить CSS ( http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html#css ):

#fade li {
display: none;
list-style-type: none;
}
Егор Желудков
Спасибо, с этим справился. Осталась проблема с выводом всех пунктов при загрузке страницы. Может, это связано с расположением скрипта внутри кода? Или это неизбежное свойство скрипта?
NMitra
А куда вы код добавили? На блоге я его не вижу. Нужно чтобы список изначально был невидимый (display: none;)
Егор Желудков
Сам скрипт в head, а TextList1 находится в секции в body


Адрес блога: http://pravloza.blogspot.ru/
Виджет "Список"
Егор Желудков
К сожалению, код не вставился в комментарий, он его пытается интерпретировать)
NMitra
Добавьте в CSS

#slide li {display: none;}