19
9月
2

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


Jqueryでスライドボックスをやってみた(スクロール追跡機能付き)を少し改良しました。

改良版をアップしました

■改良点

1.class名やid名を簡素化 2.スクロールの追跡を滑らかに

■header(Jquery)
前回と同じ

■header(CSS)
前回と同じ

■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').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('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-' + $chkboxname).animate({'marginLeft':'-' + $maxwid + 'px'},$speed); //クリックされたスライド以外のタブ画像を開く用の画像に変更 $(this).children('.img-box').attr('src','images/tab_on-' + $chkboxname + '.png'); } }); }); }); </script>

■body

<div id="wrapper"> <div class="slide-box1"> <div class="content" style="background-color:#bf0000;"> コンテンツ1 </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;"> コンテンツ2 </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;"> コンテンツ3 </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;"> コンテンツ4 </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;"> コンテンツ5 </div> <div class="tab-box"> <img src="images/tab_on-box5.png" class="img-box" /> </div> </div> </div>


※wrapperが追加されています。

■命名規則

class="slide-box*"(スライドボックスのclass) class="tab-box"(タブのclass) class="img-box"(タブ画像のimgタグのclass) tab_on-box*.png(開く用のタブ画像) tab_off-box*.png(閉じる用のタブ画像)


※*部分はスライドボックス単位で数字を合わせる

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

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

ちなみにスマートフォンにも対応しています。

ただ、iscrolljQuery.flickableなどのフリックスクロール化させる類のモノと相性が悪いようで、タブのクリックができなくなります。

その場合はクリックイベントからタッチイベントに変えてあげると動作してくれます。(たぶん・・・一応自分のスマフォでは動いてた)

$('.tab-box').click(function() {}); ↓に変更 $('.tab-box').bind('touchstart', function() {});

Enjoyed reading this post?
Subscribe to the RSS feed and have all new posts delivered straight to you.
2 Comments:
  1. […] ※改良版をアップしました […]

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

Post your comment



now loading...