Рыл и гуглил эту тему весь день. Скажу честно информации много. Но все как-то заморочено, и не совсем то что соответствовало бы моим потребностям. По этому остаток дня потратил на самостоятельное написание. Сделано для 4-х страниц, но можно сделать и больше, для этого просто вставить сколько надо div-ов класса block с соответствующим id="blockN" (где N - порядковый номер блока) и соответствующим вложенным div с id="block_inN" (где N - порядковый номер блока). Скрипт написан на основе функции animate для jqery. Не знаю как на счет кроссбраузерности, пробовал только в хроме и ие. Отпишитесь у кого другие. Критика приветствуется. Вот весь код (может кому пригодиться): Код (Text): <!DOCTYPE html> <html> <head> <style> #main { position: absolute; top: 50%; left: 50%; width: 1000px; height: 500px; margin-top: -225px; margin-left: -500px; } .nav { position: absolute; background-color:#0fa; width:30px; height:30px; top:450px; text-align:center; } #forward { left:900px; display:block } #back { left:100px; display:none } #page { left:50%; } .block { position: absolute; width:100%; height:100%; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> var page=1; window.onload = function() { document.getElementById('page').innerHTML = page; } function push_arrow (ev) { var e = window.event || ev, K = e.keyCode; if (K == 37 && page>1) navigation('back'); else if (K == 39 && page<$('div.block').length) navigation('forward'); } function navigation(nav){ var width; var opacity; if (nav=='forward') { width="0px"; opacity=0; } else { width="100%"; opacity=1; } if (nav=='back') page=page-1; $("#block" + page).animate({width: width}, 1000); $("#block_in" + page).animate({opacity: opacity}, 1000); if (nav=='forward') page=page+1; document.getElementById('page').innerHTML = page; if (page>1) document.getElementById('back').style.display = 'block'; else document.getElementById('back').style.display = 'none'; if (page<$('div.block').length) document.getElementById('forward').style.display = 'block'; else document.getElementById('forward').style.display = 'none'; }; </script> </head> <body onkeydown="push_arrow (event)"> <div id="main"> <div id="block4" class="block" style="background-color:#ddd"><div id="block_in4">Trulala</div></div> <div id="block3" class="block" style="background-color:#ccc"><div id="block_in3">Hatter</div></div> <div id="block2" class="block" style="background-color:#bbb"><div id="block_in2">Rubbit</div></div> <div id="block1" class="block" style="background-color:#aaa"><div id="block_in1">Alisa </div></div> <div id="forward" class="nav" onclick="navigation('forward')">>></div> <div id="page" class="nav"></div> <div id="back" class="nav" onclick="navigation('back')"><<</div> </div> </body> </html> А тепрь собственно вопрос: Ну как?
Просьба залить на jsfiddle и выдать внизу ссылку на демку сразу. Чтобы можно было пощупать в правильно собранном варианте.
Это понятно, но тестировать остальным то, что отвечает вашим потребностям надо основываясь, соответственно, на чем ?) Конечно, за простоту и Спарту, но хотя бы листание с клавиатуры, не говоря уж про листание с планшето-телефонов неплохо бы добавить (каждый первый заказчик за них душу вытрясет ведь).
Я думаю самое главное сильно не заморачиваться на этом. Потестил - не подошло - ищешь дальше, подошло - залил в скелет графику и контент и используешь Добавлено спустя 1 минуту 30 секунд: согласен, есть над чем работать
Вашими бы устами . У иных ухо от заказчиков болит от несовместимости с платформами и новыми-старами js-либами того что было когда-то кем-то написано и "импортировано в скелет"
Если используете jquery то событие swipe, плагин и реализацию в мобильной jquery покурите по мануалам если нативная реализация на js не интересует.