13
10月
0

jqueryで上下左右+斜めに移動するスライドショーの詳細


jqueryで上下左右+斜めに移動するスライドショーの詳細です。

■デモ
http://cmf.ohtanz.com/SlideShow/

■ソース
http://cmf.ohtanz.com/download/SlideShow.zip

■要素の位置関係

■header(jquery)

<script src="jquery-1.6.4.min.js" type="text/javascript"></script>

■header(javascript)

//表示開始位置(行) var startRow = 3; //表示開始位置(列) var startCol = 3; //列の最大値 var maxCol = 5; //行の最大値 var maxRow = 5; //最初に表示するイメージの列、行及び最大行数、最大列数を指定します。


//イメージの高さがフレームの高さより小さいときは垂直中央に配置 $('div#slideShowContent div#Scroller div.Image').each(function() { if ($(this).children().height() < imageHeight) { $(this).children().css('margin-top', (imageHeight - $(this).children().height()) / 2 + 'px'); } }); //イメージの高さがフレームの高さより小さいときは自動で垂直中央に配置します。


//スクロールバーの表示、非表示 $('div#slideShowContent div#MoveRight').hover(function() { moveBarFade($(this), 0.3); },function(){ moveBarFade($(this), 0); }); //スクロールバーの位置にマウスがきたとき又は離れたときにフェードイン、アウトします。 (※全8箇所)


//スクロールバークリックで移動 $('div#slideShowContent div#MoveRight').click(function() { if (nowCol < maxCol) { nowCol++; obliquelyScroll(); } }); //スクロールバーがクリックされたときは当該方向へ1つスクロールします。 //(※全8箇所)


function obliquelyScroll() { $('div#slideShowContent div#Scroller').animate( { scrollLeft: imageWidth * (nowCol - 1), scrollTop: imageHeight * (nowRow - 1) }, 'slow'); } //クリックされたスクロールバーに応じて移動するときに呼出す関数。


function moveBarFade(obj, n) { obj.fadeTo("fast", n); } //スクロールバーをフェードイン、フェードアウトするときに呼出す関数。

■header(css)

html,body { margin: 0px; padding: 0px; background-color: #5f8000; width: 100%; height: 100%; } //width、heightはスライドショーを中央に配置するための設定。


div#slideShowContent { /* スライドショー全体の設定 */ position: absolute; top: 50%; left: 50%; margin-left: -430px; margin-top: -330px; padding: 0; width: 860px; height: 660px; } //position、top、left、margin-left、margin-rightが画面中央への配置の設定。 //width、heightは上下左右のフレーム部分を含めたサイズ。


div#slideShowContent div#Scroller { /* イメージ表示領域の設定 */ position: absolute; top: 30px; left: 30px; margin: 0; padding:0; overflow: hidden; width: 800px; height: 600px; white-space: nowrap; background-color: #000000; letter-spacing: -0.40em; font-size: 0; } //position、left、topにて左30px、上30pxに配置。 //overflowにてブラウザのスクロールバーを隠します。 //width、heightがイメージの表示領域になります。 //white-spaceにてdiv要素の改行を抑止しています。 //letter-spacing、font-sizeにて要素間の空白をなくしています。


div#slideShowContent div#FrameLeft { /* 左フレームの設定 */ position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 30px; height: 660px; background-color: #000000; -webkit-border-top-left-radius: 20px; -moz-border-radius-topleft: 20px; border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-bottomleft: 20px; border-bottom-left-radius: 20px; } //position、left、topにて左0px、上0pxに配置。 //widthはフレームの幅、heightは上下フレーム分の高さを含めたサイズに。 //-webkit-border-top-left-radius、-moz-border-radius-topleft、border-top-left-radiusは左上を角丸に。 //-webkit-border-bottom-left-radius、-moz-border-radius-bottomleft、border-bottom-left-radiusは左下を角丸に。


div#slideShowContent div#FrameRight { /* 右フレームの設定 */ position: absolute; top: 0; right: 0; margin: 0; padding: 0; width: 30px; height: 660px; background-color: #000000; -webkit-border-top-right-radius: 20px; -moz-border-radius-topright: 20px; border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-bottomright: 20px; border-bottom-right-radius: 20px; } //position、right、topにて右0px、上0pxに配置。 //widthはフレームの幅、heightは上下フレーム分の高さを含めたサイズに。 //-webkit-border-top-right-radius、-moz-border-radius-topright、border-top-right-radiusは右上を角丸に。 //-webkit-border-bottom-right-radius、-moz-border-radius-bottomright、border-bottom-right-radiusは右下を角丸に。


div#slideShowContent div#FrameTop { /* 上フレームの設定 */ position: absolute; top: 0; left: 30px; margin: 0; padding: 0; width:800px; height:30px; background-color: #000000; } //position、left、topにて左30px、上0pxに配置。 //widthは左右フレーム分の幅を含めたサイズ、heightはフレームの高さ。


div#slideShowContent div#FrameBottom { /* 下フレームの設定 */ position: absolute; bottom: 0; left: 30px; margin: 0; padding: 0; width: 800px; height: 30px; background-color: #000000; } //position、left、bottomにて左30px、下0pxに配置。 //widthは左右フレーム分の幅を含めたサイズ、heightはフレームの高さ。


div#slideShowContent div#MoveTopLeft { /* 左上スクロールバーの設定 */ position: absolute; top: 30px; left: 30px; margin: 0; padding: 0; width: 50px; height: 50px; background-color: #000000; cursor: pointer; background-image: url("images/topleft.png"); background-position: center center; background-repeat: no-repeat; filter: alpha(opacity=0); opacity: 0; } //position、left、topにて左30px、上30pxに配置(イメージ表示領域の左上)。 //width、heightはスクロールバーのサイズ。 //cursorでマウスカーソルをポインターに変更。 //background-***にて▲画像を指定しつつ要素の中央に配置。 //filter、opacityにて透明度を0にして最初は見えない状態に。


div#slideShowContent div#MoveLeft { /* 左スクロールバーの設定 */ position: absolute; top: 80px; left: 30px; margin: 0; padding: 0; width: 50px; height: 500px; background-color: #000000; cursor: pointer; background-image: url("images/left.png"); background-position: center center; background-repeat: no-repeat; filter: alpha(opacity=0); opacity: 0; } //position、left、topにて左30px、上80pxに配置(イメージ表示領域の左上のスクロールバーの高さ分をtopに加算)。 //width、heightはスクロールバーのサイズ。 //cursorでマウスカーソルをポインターに変更。 //background-***にて▲画像を指定しつつ要素の中央に配置。 //filter、opacityにて透明度を0にして最初は見えない状態に。


div#slideShowContent div#MoveBottomLeft { /* 左下スクロールバーの設定 */ position: absolute; bottom: 30px; left: 30px; margin: 0; padding: 0; width: 50px; height: 50px; background-color: #000000; cursor: pointer; background-image: url("images/bottomleft.png"); background-position: center center; background-repeat: no-repeat; filter: alpha(opacity=0); opacity: 0; } //position、left、bottomにて左30px、下30pxに配置(イメージ表示領域の左下)。 //width、heightはスクロールバーのサイズ。 //cursorでマウスカーソルをポインターに変更。 //background-***にて▲画像を指定しつつ要素の中央に配置。 //filter、opacityにて透明度を0にして最初は見えない状態に。


div#slideShowContent div#MoveTopRight { /* 右上スクロールバーの設定 */ position: absolute; top: 30px; right: 30px; margin: 0; padding: 0; width: 50px; height: 50px; background-color: #000000; cursor: pointer; background-image: url("images/topright.png"); background-position: center center; background-repeat: no-repeat; filter: alpha(opacity=0); opacity: 0; } //position、right、topにて右30px、上30pxに配置(イメージ表示領域の右上)。 //width、heightはスクロールバーのサイズ。 //cursorでマウスカーソルをポインターに変更。 //background-***にて▲画像を指定しつつ要素の中央に配置。 //filter、opacityにて透明度を0にして最初は見えない状態に。


div#slideShowContent div#MoveRight { /* 右スクロールバーの設定 */ position: absolute; top: 80px; right: 30px; margin: 0; padding: 0; width: 50px; height: 500px; background-color: #000000; cursor: pointer; background-image: url("images/right.png"); background-position: center center; background-repeat: no-repeat; filter: alpha(opacity=0); opacity: 0; } //position、right、topにて右30px、上80pxに配置(イメージ表示領域の右上のスクロールバーの高さ分をtopに加算)。 //width、heightはスクロールバーのサイズ。 //cursorでマウスカーソルをポインターに変更。 //background-***にて▲画像を指定しつつ要素の中央に配置。 //filter、opacityにて透明度を0にして最初は見えない状態に。


div#slideShowContent div#MoveBottomRight { /* 右下スクロールバーの設定 */ position: absolute; bottom: 30px; right: 30px; margin: 0; padding: 0; width: 50px; height: 50px; background-color: #000000; cursor: pointer; background-image: url("images/bottomright.png"); background-position: center center; background-repeat: no-repeat; filter: alpha(opacity=0); opacity: 0; } //position、right、bottomにて右30px、下30pxに配置(イメージ表示領域の右下)。 //width、heightはスクロールバーのサイズ。 //cursorでマウスカーソルをポインターに変更。 //background-***にて▲画像を指定しつつ要素の中央に配置。 //filter、opacityにて透明度を0にして最初は見えない状態に。


div#slideShowContent div#MoveTop { /* 上スクロールバーの設定 */ position: absolute; top: 30px; left: 80px; margin: 0; padding: 0; width: 700px; height: 50px; background-color: #000000; cursor: pointer; background-image: url("images/top.png"); background-position: center center; background-repeat: no-repeat; filter: alpha(opacity=0); opacity: 0; } //position、left、topにて左80px、上30pxに配置(イメージ表示領域の左のスクロールバーの幅をleftに加算)。 //width、heightはスクロールバーのサイズ。 //cursorでマウスカーソルをポインターに変更。 //background-***にて▲画像を指定しつつ要素の中央に配置。 //filter、opacityにて透明度を0にして最初は見えない状態に。


div#slideShowContent div#MoveBottom { /* 下スクロールバーの設定 */ position: absolute; bottom: 30px; left: 80px; margin: 0; padding: 0; width: 700px; height: 50px; background-color: #000000; cursor: pointer; background-image: url("images/bottom.png"); background-position: center center; background-repeat: no-repeat; filter: alpha(opacity=0); opacity: 0; } //position、left、bottomにて左80px、下30pxに配置(イメージ表示領域の左のスクロールバーの幅をleftに加算)。 //width、heightはスクロールバーのサイズ。 //cursorでマウスカーソルをポインターに変更。 //background-***にて▲画像を指定しつつ要素の中央に配置。 //filter、opacityにて透明度を0にして最初は見えない状態に。


div#slideShowContent div#Scroller div.Image { /* イメージの設定 */ display: inline-block; padding: 0; margin: 0; width: 800px; height: 600px; vertical-align: top; text-align: center; } //1つのイメージの表示領域(スライドする際の幅と高さ)。 //displayにてdiv要素の改行を抑止。 //vertical-alignにてイメージを要素の上に。 //text-alignにてイメージを要素の中央に。

■body

<div id="slideShowContent"> <!--上フレーム--> <div id="FrameTop"></div> <!--左フレーム--> <div id="FrameLeft"></div> <!--イメージ表示領域--> <div id="Scroller"> <!--1行目イメージ--> <div class="Image"><img src="images/1.jpg" width="800" /></div> <div class="Image"><img src="images/2.jpg" width="800" /></div> <div class="Image"><img src="images/3.jpg" width="800" /></div> <div class="Image"><img src="images/4.jpg" width="800" /></div> <div class="Image"><img src="images/5.jpg" width="800" /></div> <br /> <!--2行目イメージ--> <div class="Image"><img src="images/6.jpg" width="800" /></div> <div class="Image"><img src="images/7.jpg" width="800" /></div> <div class="Image"><img src="images/8.jpg" width="800" /></div> <div class="Image"><img src="images/9.jpg" width="800" /></div> <div class="Image"><img src="images/10.jpg" width="800" /></div> <br /> <!--3行目イメージ--> <div class="Image"><img src="images/11.jpg" width="800" /></div> <div class="Image"><img src="images/12.jpg" width="800" /></div> <div class="Image"><img src="images/13.jpg" width="800" /></div> <div class="Image"><img src="images/14.jpg" width="800" /></div> <div class="Image"><img src="images/15.jpg" width="800" /></div> <br /> <!--4行目イメージ--> <div class="Image"><img src="images/16.jpg" width="800" /></div> <div class="Image"><img src="images/17.jpg" width="800" /></div> <div class="Image"><img src="images/18.jpg" width="800" /></div> <div class="Image"><img src="images/19.jpg" width="800" /></div> <div class="Image"><img src="images/20.jpg" width="800" /></div> <br /> <!--5行目イメージ--> <div class="Image"><img src="images/21.jpg" width="800" /></div> <div class="Image"><img src="images/22.jpg" width="800" /></div> <div class="Image"><img src="images/23.jpg" width="800" /></div> <div class="Image"><img src="images/24.jpg" width="800" /></div> <div class="Image"><img src="images/25.jpg" width="800" /></div> </div> <!--左フレーム--> <div id="FrameRight"></div> <!--下フレーム--> <div id="FrameBottom"></div> <!--左スクロールバー--> <div id="MoveLeft"></div> <!--左上スクロールバー--> <div id="MoveTopLeft"></div> <!--上スクロールバー--> <div id="MoveTop"></div> <!--右上スクロールバー--> <div id="MoveTopRight"></div> <!--右スクロールバー--> <div id="MoveRight"></div> <!--左下スクロールバー--> <div id="MoveBottomLeft"></div> <!--下スクロールバー--> <div id="MoveBottom"></div> <!--右下スクロールバー--> <div id="MoveBottomRight"></div> </div>

Enjoyed reading this post?
Subscribe to the RSS feed and have all new posts delivered straight to you.
Post your comment



now loading...