Хоризонтално превъртане с java script 3, Awebdesign - s Blog

Хоризонтално превъртане с java script 3

превъртане

Няколко души бяха помолени да обяснят как работи превъртането на времевата линия за сърфиране на Plurk. След това, за своето десетилетие, Google пусна 10-годишна времева линия. Затова реших да покажа как се прави превъртане, като се използват и двата метода - превъртане с колелцето на мишката и използване на плъзгане с мишката.

Следват два урока за хоризонтално превъртане с java скрипт.

Първият урок е дневник с възможност за превъртане. Вторият урок е написан по молба на Тревър Морис, който искаше да направи "потока" на дъгата в заглавката на своя сайт по-плавен.1. Хоризонтално превъртане с мишка и колелце на мишката с помощта на java скрипт

Когато създаваме хоризонтално превъртащ се дневник, ние ще предоставим както Plurk, така и Google поддръжка за превъртане.

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

Дефиниране на проблем

  1. Хванете събитието на мишката надолу, определете позицията на скролиращия елемент и X-координатата на мишката.
  2. Когато мишката се движи (при натискане), превъртете елемента от старата към новата позиция на мишката.
  3. Когато мишката е извън прозореца за превъртане, или отменете събитието mouse down, или задействайте събитието mouse up.

CSS

Няма да давам целия код, само това, което е подходящо.

jQuery

Кодът, използван в демонстрацията

Ниеизползваме три вградени функции: mousedown, mouseup и mousemove. След това добавете плъгина jQuery mousewheel, преди да промените препълването в CSS:

2. Ефект на дъгата в Тревър Морис

Използвайки същия this.scrollLeft DOM, можем да създадем напълно различен ефект. Ще работи и при липса на поддръжка на javascript.

Маркиране

Празният допълнителен div е широкият елемент, а div#rainbow е препълващият елемент, който ще плава вътре.

CSS

В допълнение към CSS, аз също написах кода за поддръжка на прозрачност на PNG изображения за IE6, така че да работи правилно, когато java скриптовете са деактивирани.

Няколко специални стила за IE6: