🎢 😘 📉 ブロック内の水平スクロール 👆🏾 👷🏼 😥

水平スクロールは非常に独創的なテクニックです。つまり、独創性はプロジェクトの成功の主要な要素の1つです。

どのように機能しますか？

サイズ制限のあるブロック（コンテナ）が作成され、より大きなブロック（スライダー）がコンテナに配置されます。コンテナにはコンテンツ（セクション）があります。

Containerブロックでは、下図に示すように、Sliderブロックの一部のみが表示されます。

スライダー1

下の図に示すように、特定のアクションでSlideraブロックが移動し、その結果、表示される部分が変化します。

スライダー3

今ではすべてが誰にでも明らかだと思います:)

実装

Sliderブロックの移動を伴うすべての操作は、よく知られているjavascript mootoolsライブラリの助けを借りて行われます。

HTMLコードは非常に単純です。まず、ヘッドタグの間に以下のコードを挿入して、mootoolsライブラリを接続および構成します。

  <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}）;
 $（ 'コンテナ'）。addEvent（ 'マウスオーバー'、scroll.start.bind（スクロール））;
 $（ 'コンテナ'）。addEvent（ 'mouseout'、scroll.stop.bind（scroll））;
 }）;
 </ script>

次に、必要なブロックをすべて作成します。

  <div id = "container">

 <div class = "slider">

 <div class = "section">セクション1のコンテンツ</ div>
 <div class = "section">セクション2のコンテンツ</ div>
 <div class = "section">セクション3のコンテンツ</ div>
 <div class = "section">セクション4のコンテンツ</ div>
 <div class = "section">セクション5のコンテンツ</ div>

 </ div>

 </ div>

あとはcssだけです

  #container {

幅：780px;
高さ：440px;
 border：8px solid #FFF;
オーバーフロー：自動;
マージン：0自動;
 overflow-x：非表示;
オーバーフローy：非表示。

 }
 .slider {

幅：2000px;
高さ：400px;
パディング：20px;
背景：#CCCCCC;

 }
 .section {

マージン：0;
幅：220ピクセル;
 float：左;
マージン右：50px;

 }

それだけです！完了^ _ ^

例を見る

 ダウンロード例

Source Chernev.Ru-ポジティブなブログ

ブロック内の水平スクロール

どのように機能しますか？

実装

More articles: