falbar Новостная лента на jQuery

Новостная лента на jQuery

14 декабря 2014 7689 0

Если у вас возникла необходимость добавить на сайт блок со сменяющимся контентом – новостную ленту, но желания писать свой скрипт у вас нет, то в этой статье вы узнаете о решении, которое позволяет осуществить это в несколько строчек jQuery кода.

Реклама

Идея проста, чтобы её реализовать необходимо, для начала, добавить HTML код нашей новостной ленты:

<ul id="ticker">
    <li>
      Запись №1
   </li>
 <li>
      Запись №2
   </li>
 <li>
      Запись №3
   </li>
 <li>
      Запись №4
   </li>
</ul>

Теперь добавим CSS:

#ticker{
 height: 40px;
   overflow: hidden;
}
#ticker li{
   height: 40px;
}

В каждом из элементов li будет храниться наша запись. Высота должна равняться высоте обертки, в нашем случае ul#ticker, если вам нужно чтобы одна запись была постоянна активна.

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

function tick(){
 $("#ticker li:first").slideUp(function(){
     $(this).appendTo($("#ticker")).slideDown();
   });
};

setInterval(function(){
    tick();
}, 5000);

Вот так просто и, главное, без лишнего кода реализуется новостная лента на jQuery. Конечно, вы можете использовать и другие варианты анимации, например смена новостей за счет свойства opacity. Как это работает, можно увидеть в материалах «демо». На данное решение я наткнулся совсем недавно и уже успел применить в нескольких проектах. Думаю, оно будет полезно и другим читателем этой статьи.

Реклама
Комментариев еще не оставлено
no_avatar