Показать Меню
falbar Сменяющиеся новости

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

Сменяющиеся новости

Если у Вас возникла необходимость добавить на сайт блок со сменяющимся контентом – новостную ленту, но желания писать свой скрипт у Вас нет, то в этой статье Вы узнаете о решении, которое позволяет осуществить это в несколько строчек 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);

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

Спасибо за внимание.

Подписаться на обновления

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