Горизонтальна прокрутка з ява-скрипт 3, Awebdesign - s Blog

Горизонтальна прокрутка з ява-скрипт 3

горизонтальна

Пара людей попросили пояснити, як працює прокручування на Plurk's browse timeline. Потім на своє десятиліття Google випустив 10 років timeline. Так що я вирішив показати, як зробити прокручування, використовуючи обидва методи - прокручування за допомогою коліщатка миші і за допомогою перетягування мишкою.

Далі представлені два уроки з горизонтального прокручування з ява-скриптом.

Перший урок - щоденник, що прокручується. Другий урок написаний на запит Trevor Morris, який хотів зробити «перетікання» веселки в шапці свого сайту більш плавним.1. Горизонтальна прокрутка мишею та коліщатком мишки за допомогою ява-скрипта

При створенні щоденника, що горизонтально прокручується, ми забезпечимо підтримку прокручування як на Plurk і як на Google.

Для початку зробимо тягнеться (wrapping) div зі значенням overflow: auto; (яке ми потім змінимо на overflow: hidden; за допомогою jQuery). Внутрішній елемент (у нашому випадку ul) матиме достатню ширину, щоб вмістити всі необхідні елементи li, а щоб li не розтягували div вертикально (не створювали нову лінію), всі li мають певну ширину і властивість float: left;.

Постановка задачі

  1. Вловити подію mouse down, визначити положення елемента, що прокручується, і X-координату мишки.
  2. Коли мишка рухається (у натиснутому стані), то прокручувати елемент з відривом від старого до нового становища мишки.
  3. Коли мишка знаходиться поза вікном прокручування, то скасувати подію mouse down або запустити подію mouse up.

CSS

Не наводитиму весь код, тільки те, що стосується справи.

jQuery

Код, який використовується в demo

МиВикористовуємо три вбудовані функції: mousedown, mouseup і mousemove. Потім додаємо jQuery mousewheel plugin перед зміною overflow в CSS:

2. Ефект веселки на сайті Trevor Morris

Використовуючи той же this.scrollLeft DOM, ми можемо створити зовсім інший ефект. Він працюватиме також за відсутності підтримки ява-скрипту.

Розмітка

Порожній екстра-div – це широкий елемент, а div#rainbow – це елемент із overflow, який переміщатиметься всередині.

CSS

Крім CSS, я також прописав код підтримки прозорості PNG-зображень для IE6, для коректної роботи при відключених ява-скриптах.

Декілька спеціальних стилів для IE6: