Горизонтальный скроллинг это очень оригинальный прием, а именно оригинальность одна из главных составляющих успеха любого проекта.
Как это работает?
Создается блок(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;
}Все! Готово ^_^
Посмотреть пример
Скачать пример
Источник Чернев.Ру — Позитивный блог
