Archive for 9月 27th, 2011



27
9月

「Jqueryでスライドボックスをやってみた」のさらに続き


Jqueryでスライドボックスをやってみた(スクロール追跡機能付き)の続きの続き。

前回のモノからさらにパワーアップということで、タブを常に前に表示し、さらにスライドを閉じたときにタブに違和感がないようにJquery-UIを使用してタブをフェードアウト、フェードインさせてみたいと思います。

■改良点

1.タブを常に前に表示 2.タブをフェードアウト、フェードインさせる

■header(Jquery)

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


※Jquery-UIを追加

■header(CSS)

.content { margin: 0; border: 0; float: left; width: 400px; height: 500px; } .content2 { margin: 0; border: 0; color: #ffffff; font-size: 12px; padding: 5px 15px 5px 50px; }


※content2はcontent内に文章入れたサンプルにした為追加、それ以外は前回と同じ

■header(スライドボックス)

<script type="text/javascript"> var $speed = 500; //スライド速度 var $maxwid = 400; //スライド幅 var $plus = 100; //スライド(コンテンツ)の高さ ÷ タブの数 var $basetabtop = 0; //タブ開始位置 var $baseslidetop = 0; //スライド位置 //初期処理(CSSの設定とスライドを閉じる) $(document).ready(function(){ var $tabtop = $basetabtop; var $slidetop = $baseslidetop; //wrapperのCSS設定 $('#wrapper').css('margin','0'); $('#wrapper').css('position','absolute'); $('#wrapper').css('width',$maxwid + 'px'); $('#wrapper').css('border','0'); $('#wrapper').css('z-index','10'); $('#wrapper').animate({top: $slidetop + 'px'}); $('[class^="slide-box"]').each(function() { //tab-boxを取得 var $children = $(this).children('.tab-box'); //slide-box*のCSS設定 $(this).css('margin','0'); $(this).css('position','absolute'); $(this).css('top', $baseslidetop + 'px'); $(this).css('width',$maxwid + 'px'); $(this).css('border','0'); //tab-box*のCSS設定 $children.css('margin','0'); $children.css('position','absolute'); $children.css('top',$tabtop + 'px'); $children.css('left',$maxwid + 'px'); $children.css('border','0'); $children.css('z-index','11'); $children.css('cursor','pointer'); //slide-box*を閉じる $(this).animate({ marginLeft: -$maxwid + 'px'},$speed); //2つ目以降のスライドの高さを調整 $tabtop = $tabtop + $plus; }); }); //スクロール時の処理 $(window).scroll(function(){ //スクロール値を取得してスライドの現在値を調整 var $slidetop = $baseslidetop + $(document).scrollTop(); //スライドの位置を再セット $('#wrapper').stop().animate({ top: $slidetop + 'px' }); }); //クリック時の処理 $(function() { $('.tab-box').click(function() { //クリックされたタブの親要素を取得 var $boxname = $(this).parent().attr("class").slice(6); //現在のスライドの状態を取得 var $offset = $('.slide-' + $boxname).offset(); if ($offset.left < 0) { //スライドが閉じている状態の時はスライドを開く $('.slide-' + $boxname).animate({ marginLeft: '0px'} , $speed); //スライドが閉じている状態の時はタブ画像を開く用の画像に変更 $(this).children('.img-box').attr('src','images/tab_off-' + $boxname + '.png'); } else { //スライドが開いている状態の時はスライドを閉じる $('.slide-' + $boxname).animate({ marginLeft: -$maxwid + 'px'} , $speed); //スライドが閉じている状態の時はタブ画像を閉じる用の画像に変更 $(this).children('.img-box').attr('src','images/tab_on-' + $boxname + '.png'); } $('.tab-box').each(function() { //タブの親要素を取得 var $chkboxname = $(this).parent().attr("class").slice(6); if ($chkboxname != $boxname) { //slide-box*の位置を取得 var $p_offset = $(this).parent().offset(); //slide-box*が開いている時はタブをフェードアウト if ($p_offset.left > -$maxwid) { $(this).parent().children('.tab-box').effect('fade', '', 'fast'); } //クリックされたスライド以外は閉じる $('.slide-' + $chkboxname).animate({ marginLeft: -$maxwid + 'px'},$speed); //クリックされたスライド以外のタブ画像を開く用の画像に変更 $(this).children('.img-box').attr('src','images/tab_on-' + $chkboxname + '.png'); //slide-box*が開いている時はタブをフェードイン if ($p_offset.left > -$maxwid) { $(this).parent().children('.tab-box').show('fade', '', '1000'); } } }); }); }); </script>


※タブが常に前にくるようにz-indexを追加
※閉じたタブがフェードアウト、フェードインするようにeffectとshowを追加

■body

<div id="wrapper"> <div class="slide-box1"> <div class="content" style="background-color:#bf0000;"> <div class="content2"> コンテンツ1 </div> </div> <div class="tab-box"> <img src="images/tab_on-box1.png" class="img-box" /> </div> </div> <div class="slide-box2"> <div class="content" style="background-color:#1000a6;"> <div class="content2"> コンテンツ2 </div> </div> <div class="tab-box"> <img src="images/tab_on-box2.png" class="img-box" /> </div> </div> <div class="slide-box3"> <div class="content" style="background-color:#009b0f;"> <div class="content2"> コンテンツ3 </div> </div> <div class="tab-box"> <img src="images/tab_on-box3.png" class="img-box" /> </div> </div> <div class="slide-box4"> <div class="content" style="background-color:#828282;"> <div class="content2"> コンテンツ4 </div> </div> <div class="tab-box"> <img src="images/tab_on-box4.png" class="img-box" /> </div> </div> <div class="slide-box5"> <div class="content" style="background-color:#823382;"> <div class="content2"> コンテンツ5 </div> </div> <div class="tab-box"> <img src="images/tab_on-box5.png" class="img-box" /> </div> </div> </div>


※content2はcontent内に文章入れたサンプルにした為追加、それ以外は前回と同じ

■完成品(デモ)
https://cmf.ohtanz.com/slidebox2/

■ソースなど
https://cmf.ohtanz.com/download/slidebox2.zip