Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как делается такое. (https://javascript.ru/forum/dom-window/33240-kak-delaetsya-takoe.html)

kolyan1983 15.11.2012 11:35

Как делается такое.
 
Есть огромная html страница (заключающая в себе как бы отдельные "страницы" на весь экран в дивах), сверстанная в один длинный лист - index.html.

Задача сделать навигацию по этим "страницам": На обработчики кликов по ссылкам, или нажатие стрелочек на клавиатуре реализовать анимацию с быстрой и плавной (если "страница" соседняя) прокруткой до нужной "страницы" (т.е. дива), причём как вертикальную, так и горизонтальную.

Как вообще такое делается? Может готовые jquery плагины кто знает?

kolyan1983 15.11.2012 13:59

Может не очень понятно описал суть задачи.

Есть страница состоящая из дивов один под другим:

<div id="Раздел_1__">Раздел 1</div>
<div id="Раздел_1_1">Раздел 1_1</div>
<div id="Раздел_1_2">Раздел 1_2</div>
<div id="Раздел_1_3">Раздел 1_3</div>

<div id="Раздел_2__">Раздел 2</div>
<div id="Раздел_2_1">Раздел 2_1</div>
<div id="Раздел_2_2">Раздел 2_2</div>

<div id="Раздел_3__">Раздел 3</div>
<div id="Раздел_3_1">Раздел 3_1</div>

Где каждый див - на всю страницу (типа отдельная страница).
Надо сделать так чтобы контент прокручивался не сверху-вниз, а имел
такую структуру:

Раздел 1__ | Раздел 2__ | Раздел 3__
Раздел 1_1 | Раздел 2_1 | Раздел 3_1
Раздел 1_2 | Раздел 2_2 |
Раздел 1_3 |

Допустим текущий раздел "Раздел 1". Нажали стрелку вправо на клавиатуре - должен произойти скролл вправо на "Раздел 2" как будто он действительно следующий справа, а не внизу.

Возможно ли такое в принципе? Или расположение дивов должно ОБЯЗАТЕЛЬНО соответствовать требуемой структуре

Раздел 1__ | Раздел 2__ | Раздел 3__
Раздел 1_1 | Раздел 2_1 | Раздел 3_1
Раздел 1_2 | Раздел 2_2 |
Раздел 1_3 |

?

dmitriymar 15.11.2012 14:14

ну и в чём вопрос ? сделай див на весь экран. с оверфлоу хиден.
в дочерний вложи все остальные позиционируй их чтоб встали в одну линию css -в помощь
если вверх-вниз ещё линий несколько
и меняй лефт дочернего,с использованием таймера
тоже самое если нужно и вниз вверх листать -меняй top дочернему
организуй правильно структуру с помощью нтмл цсс а скрипта там, от силы, строк 20


Часовой пояс GMT +3, время: 09:27.