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

14 декабря 2014 Антон Кулешов 3264 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);

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

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

Слайдер на jQuery с эффектом занавеса

24 декабря 2014 Антон Кулешов

Недавно я обозревал нестандартный слайдер с красивыми эффектами при смене картинок. В этот раз я хочу рассказать про слайдер jqFancyTransitions с эффектом занавеса, написанный на jQuery.

Делаем красивые чекбоксы в стиле IOS7

27 ноября 2014 Антон Кулешов

Недавно наткнулся на интересную JavaScript библиотеку при помощи, которой можно изменить стандартные стили чекбоксов на более красивые в формате IOS7.

Галерея на jQuery «не только лишь» для фото и видео

6 марта 2015 Антон Кулешов

Fotorama - мощная и многофункциональная галерея, написанная на jQuery. Сразу скажу, скрипт довольно большой, так как включает в себя универсальное решение практически любой галереи или слайдера фотографий. Отсюда и вес плагина - 101кб, к сравнению, библиотека jQuery занимает примерно 250кб пространства на хостинге.