28 января 2008 ~ 4211 Комментарий

Горизонтальный скроллинг в блоке

slider2
Горизонтальный скроллинг это очень оригинальный прием, а именно оригинальность одна из главных составляющих успеха любого проекта.

Как это работает?

Создается блок(Container) с ограничением размера, в Container помещается блок большего размера(Slider) в котором находятся блоки с контентом(Section).

В блоке Container мы будем видеть только лишь часть блока Slider, как показано на рисунке ниже.

See Spot Run trailer

slider1

При определенном действии блок Slidera сдвигается и тем самым его видимая часть меняется, как это показано на рисунке ниже.

slider3

Думаю теперь все и всем понятно :)

Реализация

Все операции с движением блока 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

4211 Комментарий для “Горизонтальный скроллинг в блоке”

  1. airplane games 18 мая 2012 at 1:55 Permalink

    You are a very intelligent person!

  2. Jerri Urman 18 мая 2012 at 1:58 Permalink

    Your house is valueble for me. Thanks!…

  3. porada-prawna24 18 мая 2012 at 2:20 Permalink

    We’re a group of volunteers and opening a new scheme in our community. Your site provided us with valuable info to work on. You have done a formidable job and our whole community will be thankful to you.

  4. backlink 18 мая 2012 at 3:06 Permalink

    Hi there to every body, it’s my first go to see of this web site; this blog includes remarkable and genuinely good information in support of visitors.

  5. Summer Quiroz 18 мая 2012 at 3:28 Permalink

    What’s up, its understandable paragraph along with this YouTube video; I can’t think that one can not understand this trouble-free post having with video sample.

  6. Rodolfo Sharrar 18 мая 2012 at 3:36 Permalink

    Wonderful beat ! I would like to apprentice while you amend your website, how could i subscribe for a blog site? The account aided me a acceptable deal. I had been a little bit acquainted of this your broadcast offered bright clear concept

  7. Ab Glider Proform 18 мая 2012 at 3:40 Permalink

    You lost me, buddy. I mean, I imagine I get what youre indicating. I recognize what you are saying, but you just appear to have ignored that you will find some other men and women in the world who see this issue for what it genuinely is and might not agree with you. You may well be turning away a decent amount of individuals who may have been fans of your blog.

  8. Social Networking Sites 18 мая 2012 at 4:05 Permalink

    One of the more impressive blogs Ive seen. Thanks so much for keeping the internet classy for a change. Youve got style, class, bravado. I mean it. Please keep it up because without the internet is definitely lacking in intelligence.

  9. Viagra 18 мая 2012 at 4:10 Permalink

    Thank you for your quite good details and feedback from you. car dealers in san jose

  10. katalog stron 18 мая 2012 at 4:56 Permalink

    Thanks for your post. I also think laptop computers are becoming more and more popular currently, and now are sometimes the only sort of computer found in a household. It is because at the same time that they are becoming more and more affordable, their processing power keeps growing to the point where these are as strong as desktop computers through just a few years back.

  11. airport transfers london 18 мая 2012 at 5:04 Permalink

    I needed so that you can restore this website events to view this great site for reasons uknown, nonetheless, the info below may be well worth the hold out.

  12. mini four 18 мая 2012 at 5:09 Permalink

    Thank you, I’ve recently been searching for info approximately this topic for ages and yours is the greatest I’ve came upon so far. However, what concerning the bottom line? Are you certain concerning the supply?

  13. fitness site 18 мая 2012 at 5:20 Permalink

    Hey I was comparing some more articles with yours & admin I must say that your post Is the only one with a definitive conclusion with a proof to it. Great job.

  14. naprawa dukarek Poznań 18 мая 2012 at 5:55 Permalink

    Would you be enthusiastic about exchanging hyperlinks?


Оставить комментарий