Горизонтальный скролл содержимого в стиле iPhone
Задача была сделать галлерею шириной 100% с навигатором для управления наверху + что бы прокручивалась зажатием и перетаскиванием элементов, как в iPhone.
Кое как выполнил первое на jQuery tools с помощью функции scrollable: hrml: <div class="navi"></div> <!-- root element for scrollable --> <div class="scrollable" id=browsable> <!-- root element for the items --> <div class="items"> <!-- 1-5 --> <div style="padding-left:5px"> <img src="images/img/production/metall/1.jpg" /> <img src="images/img/production/metall/1.jpg" /> <img src="images/img/production/metall/1.jpg" /> <img src="images/img/production/metall/1.jpg" /> </div> <!-- 5-10 --> <div style="padding-left:5px"> <img src="images/img/production/metall/2.jpg" /> <img src="images/img/production/metall/2.jpg" /> <img src="images/img/production/metall/2.jpg" /> <img src="images/img/production/metall/2.jpg" /> </div> <!-- 10-15 --> <div style="padding-left:5px"> <img src="images/img/production/metall/3.jpg" /> <img src="images/img/production/metall/3.jpg" /> <img src="images/img/production/metall/3.jpg" /> <img src="images/img/production/metall/3.jpg" /> </div> <div style="padding-left:5px"> <img src="images/img/production/metall/4.jpg" /> <img src="images/img/production/metall/4.jpg" /> <img src="images/img/production/metall/4.jpg" /> <img src="images/img/production/metall/4.jpg" /> </div> <div style="padding-left:5px"> <img src="images/img/production/metall/1.jpg" /> <img src="images/img/production/metall/1.jpg" /> <img src="images/img/production/metall/1.jpg" /> <img src="images/img/production/metall/1.jpg" /> </div> </div> </div> </div> java: $(document).ready(function() { // initialize scrollable together with the navigator plugin $("#browsable").scrollable().navigator(); }); А внешне это выглядит примерно так: ![]() Так собственно сам вопрос: как к этому всему безобразию еще прикрутить функцию скроллинга в стиле прокрутики айфона? Я гуглю уже почти месяц. То что находил - не работало. Пробовал виджет ui.iGallery (библиотеки jquery.iphone), но он почему то не прикручивается. (руки кривые скорее всего). Буду очень признателен за советы.:yes: |
mixlink,
Почитай про scrollWidth, scrollLeft и onmousemove |
Часовой пояс GMT +3, время: 23:56. |