IgorA100 90 Опубликовано: 23 сентября 2012 Рассказать Опубликовано: 23 сентября 2012 Понравилась горизонтальная прокрутка реализованная тут http://ocs.ru/ (в верхней части идет прокрутка производителей, сразу под верхним большим баннером) Погуглил, но ничего путного не нашел Цитата Ссылка на сообщение Поделиться на других сайтах
alex32 942 Опубликовано: 23 сентября 2012 Рассказать Опубликовано: 23 сентября 2012 не там ищете. http://valums.com/scroll-menu-jquery/ вот неплохой вариант, даже лучше вашего примера, просто наберите в яндухе "скрол jQuery" вариантов масса Цитата Ссылка на сообщение Поделиться на других сайтах
IgorA100 90 Опубликовано: 23 сентября 2012 Рассказать Опубликовано: 23 сентября 2012 Автор вот неплохой вариант Да, действительно неплохой Спасибо. Цитата Ссылка на сообщение Поделиться на других сайтах
alex32 942 Опубликовано: 23 сентября 2012 Рассказать Опубликовано: 23 сентября 2012 да на здоровье Цитата Ссылка на сообщение Поделиться на других сайтах
IgorA100 90 Опубликовано: 30 сентября 2012 Рассказать Опубликовано: 30 сентября 2012 Автор Вот еще интересное решение. Собственно о нем получается я изначально спрашивал http://jscrollpane.kelvinluck.com/ Немного пришлось повозиться для кроссбраузного решения при резиновой верстке и неопределенной ширине контента (т.к. идет выборка из новостей) Сам шаблон: <div class="wrapper_clb"> <div id="clients_bar"> <div class="scroll-pane horizontal-only "> <ul> <table border="0" cellspacing="0" cellpadding="0"><tr> {custom category="22,1,2,3,4,5,6,7,8,9" template="slaider" aviable="global" from="0" limit="100" cache="no"} </tr></table> </ul> </div> </div> </div> Файл стилей: .wrapper_clb { max-width: 1500px; text-align: center; width: 98%; /* НЕ ТРОГАТЬ ЗНАЧЕНИЕ!!!*/ margin: 0 auto; } .scroll-pane { width: 100%; height: 200px; overflow: auto; } .horizontal-only { height: auto; max-height: 150px; } #clients_bar { position:relative; margin: 15px auto; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #clients_bar .left_part { height: 50px; left: 0; position: absolute; top: 0; width: 30px; z-index: 10; } #clients_bar .right_part { height: 50px; position: absolute; right: 0; top: 0; width: 30px; z-index: 10; } #clients_bar ul { list-style: none outside none; margin: 0; padding: 0; white-space: nowrap; width:100%; } #clients_bar table { list-style: none outside none; margin: 0; padding: 0; white-space: nowrap; position:absolute; } #clients_bar li { background: none repeat scroll 0 0 transparent; display: inline; float: left; margin: 0 10px 0 10px; overflow: hidden; padding: 0; position: relative; text-align: center; } #clients_bar li img { left: 0; max-height: 25px; top: 0; } Скрипт JS <script type="text/javascript" id="sourcecode"> $(function() { $('.scroll-pane').each( function() { $(this).jScrollPane( { maintainPosition: true, horizontalDragMinWidth: 210, horizontalDragMaxWidth: 210, autoReinitialise: true, autoReinitialiseDelay: 0 } ); } ) }); </script> Возможно кому-то пригодится. Долго пришлось возиться самому.... Цитата Ссылка на сообщение Поделиться на других сайтах
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.