Горизонтальный скроллинг в блоке
Горизонтальный скроллинг это очень оригинальный прием, а именно оригинальность одна из главных составляющих успеха любого проекта.
Как это работает?
Создается блок(Container) с ограничением размера, в Container помещается блок большего размера(Slider) в котором находятся блоки с контентом(Section).
В блоке Container мы будем видеть только лишь часть блока Slider, как показано на рисунке ниже.
При определенном действии блок Slidera сдвигается и тем самым его видимая часть меняется, как это показано на рисунке ниже.
Думаю теперь все и всем понятно :)
Реализация
Все операции с движением блока Slider будет происходить с помощь всем известной javascript библиотеки mootools.
HTML код очень простой. Сначало подключим и настроим библиотеку mootools вставив код данный ниже между тегами head.
<script type="text/javascript" src="mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var scroll = new Scroller('container', {area: 100, velocity:1});
$('container').addEvent('mouseover', scroll.start.bind(scroll));
$('container').addEvent('mouseout', scroll.stop.bind(scroll));
});
</script>
Далее создадим все необходимые блоки.
<div id="container">
<div class="slider">
<div class="section">section 1 content</div>
<div class="section">section 2 content</div>
<div class="section">section 3 content</div>
<div class="section">section 4 content</div>
<div class="section">section 5 content</div>
</div>
</div>
Теперь осталось только оформить все это дело с помощью css
#container{
width: 780px; height: 440px;
border: 8px solid #FFF;
overflow: auto;
margin: 0 auto;
overflow-x: hidden;
overflow-y: hidden;
}
.slider{
width: 2000px; height: 400px;
padding: 20px;
background: #CCCCCC;
}
.section{
margin:0; width:220px;
float:left;
margin-right:50px;
}
Все! Готово ^_^
По мотивам:
http://woork.blogspot.com/2008/03/using-css-and-mootools-to-simulate.html
В firefox 2.0.0.9 в обратную сторону очень тормозно прокручивается. А так интересно, спасибо.
Супер.
warkord, а у меня нормально прокручиваеться и в нормальную сторону.
FireFox 2.0.0.13
Можно ли подобного эффекта достичь без использования Mootools? Или хотя бы с помощью jQuery…
WebApelsin, хм, понятия не имею :/
ИМХО, syntaxhighlighter sucks, highlight.js от Ивана Сагалаева ( ) рулит. ;-)
Действительно хорошая вещь, искреннее спасибо Виктор ;)
Кстати, у вас в последнем куске кода (CSS) нет закрывающей «}», поэтому highlight.js отказывается считать это CSS’ом и не расцвечивает.
Спасибо, после моего глобального апдейта на скорую руку все подгонял и одной скобочки недосчитался :)
Спасибо! Очень круто!..)))
Из-за Mootools.svn.js размером 183Кб пример открывался немеренное количество времени. Нафиг такие эффекты. Не перевелись еще узкие каналы на Руси :(
> Написал Иван 28.03.08 в 14:11
И написал я это 03.04.08 в 17:40 :)
Кстати, у всех комментов неправильное время стоит
Нет нет нет! Все правильно, в моем блоге мы будем жить по моим законам и по моему времени :-)
Только вот почему то, время комментариев не моё 0_о и оно мне не подвластно!
Я исказил время и пространство! *Злобный смех*
Наладил в смысле.
А как сделать появляющиеся стрелочки (например как на – работает в Мозилле и не работает в ИЕ)? А то непонятно как нужно крутить если об этом не писать специально..
Это просто шедеврально! Уже только этот пост достаточен для добавления блога в rss!
интересно а можно ли сделать чтобы блок открывался не справа, а по центру?..
как сделать, чтобы прокрутка осуществлялась при нажатии на ссылки, а не при наведении на область?
блин классная штука она мне очень пригодилась а если бы еще прокручивать колёсиком мышки то ваще выло бы супер!!!
а на счет веса скриптового файла 180кб который из него можно каменты поудолять при желании )
столкнулся с такой проблемой как прокруткой в firefox,
т.е при прокрутке при переходе с одного курсора с одного элемента section на другой происходит остановка прокрутки, (только в firefox)
на представленном примере эт тоже есть,
* версии ff перепробовал разные,
как решить ?
хе-хе, вот что занчит когда отвлекают,
исправил:
столкнулся с такой проблемой как прокруткой в firefox,
когда курсор переходит с одного элемента section на другой происходит остановка прокрутки, (только в firefox)
на представленном примере эт тоже есть,
* версии ff перепробовал разные,
как решить ?
Тоже с этим столкнулся, тоже хотел бы узнать как это исправить.
Да можно пофиксить эту хрень. Фикситься очень просто. Непонимаю почему автор вставил именно такую реализацию.
Поменяй сторки
$(‘container’).addEvent(‘mouseover’, scroll.start.bind(scroll));
$(‘container’).addEvent(‘mouseout’, scroll.stop.bind(scroll));
на
$(‘container’).addEvent(‘mouseenter’, scroll2.start.bind(scroll2));
$(‘container’).addEvent(‘mouseleave’, scroll2.stop.bind(scroll2));
И будет тебе щастье :)
Ссылка битая? Не могу посмотреть пример. Поправите?
Очень красиво!
.slider{
width: 1200px; height: 120px;
padding: 5px;
background: #CECECE;
}
width: 1200px – фиксированная ширина, это оооооооооочень плохо, ибо по достижении крайнего слайда – все равно ведет в сторону, пока не будет достигнута заданная ширина. Нужна динамика
Подскажите пожалуйста как сделать прокрутку не по области а по нажатию или наведению мышки на кнопку.