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

Данный вариант отлично подойдет для различных сайтов, в данном варианте можно использовать не только популярные посты, но, к примеру, и вывод популярных комментаторов. И так, давайте приступим.

Шаг 1. HTML

HTML-структура будет оформлена в простой список с несколькими вложенными элементами внутри: главный контейнер с миниатюрами, и кнопки с двумя ссылками:

Все соответствующие сообщения будут привязаны к нашей структуре. В JavaScript мы определим вывод только 5ти сообщений за раз. Конечно, вам нужно заменить # на вашей ссылки.

Шаг 2.  CSS

Мы начнем с общих атрибутов стиля:

Как видите, список будет иметь фиксированное положение, всегда оставаясь на том же месте, когда пользователь прокручивает страницу.

Далее, давайте определим стиль перемешивания:

Список будет иметь следующий стиль:

Элементы списка не будут показаны вначале:

Наши основные элементы будут иметь следующие стили:

Эскиз будет размером 70×70 пикселей, и мы добавим немного тени вокруг него:

Стили ссылок с кнопками будет иметь следующие параметры:

Со стилями мы закончили, теперь давайте рассмотрим параметры JavaScript.

Шаг 3.  JavaScript

Основная идея заключается в том, чтобы показать 5 пунктов, которые будут быстро скользить, а так мы будем видеть только миниатюру.  Когда пользователь наведит курсор мыши на объект, то оно будет выдвигаться до его полной ширины, раскрывая названия и ссылки.

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: