Clever Geek Handbook

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

スライダー2



水平スクロールは非常に独創的なテクニックです。つまり、独創性はプロジェクトの成功の主要な要素の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:


All Articles