Скроллер вмісту на jQuery
Сьогодні буде вчитися робити ось такий сімпотічний скроллер вмісту. Для цього нам знадобитися чудовий фреймворк jQuery, плагін mousewheel.js і трохи терпіння.
Цей кльовий скрипт зробили хлопці з Флоуплеера.
можливості
- горизонтальний і вертикальний скролінг;
- можливість встановити кількість видимих елементів;
- можливість скролить мишкою (в тому числі і коліщатком миші) і стрілками з клавіатури (потрібно плагін mousewheel.js);
- створення навігаційних клавіш без програмування;
- вбудовані дії: next, prev, nextPage, prevPage, seekTo, begin, end.
підтримка браузерами
Сподобалося? Тепер давайте подивимося, як реалізувати перший приклад.
Зараз ви побачили як зробити такий же скроллер. Давай подивимося інші можливості скрипта.
повний синтаксис
Нижче йде список всіх можливостей (і значень за замовчуванням).
Використання навігації
Якщо у вашому списку багато елементів, то ви швидше за все захочете скористатися функцією навігації по сторінках (це точки над скролом).
Розглянемо такий приклад. У нас є 4 кнопки, клікаючи по яким ви будете прокручувати список елементів відразу на кілька штук. Кількість таких елементів буде залежати від кількості елементів всередині скрол.
Використання API
Розглянемо функції скрипта, які можна використовувати для організації навігації усередині скрипта.
Я думаю, що ви вже зрозуміли як багато штук можна зробити за допомогою цього скрипта.
Співзасновник Временно.нет. Цікавиться онлайн бізнесом, дизайном, юзабіліті і клієнтським програмуванням. Бере участь в розробці декількох інтернет-проектів.
Іноді пише в Твіттер. але частіше на Временно.нет.