Archive for the ‘雑記’ Category
28
10月
0
Dolphin Browserはスパイウェア？
Androidで人気のDolphin Browserを今すぐ消せ！ スパイウェアであることが判明
これマジ？
人気のあるブラウザだけにもし本当なら相当ヤバイんじゃ・・・
自分は、標準ブラウザしか使ってないけどね。
塩麹
最近塩麹というのがちょっとブームらしい。
![塩麹 140g/麹(こうじ)/税込980以上送料無料塩麹 140g[麹(こうじ)]](http://hbb.afl.rakuten.co.jp/hgb/?pc=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fkenkocom%2fcabinet%2fe187%2fe187094h_m2.jpg%3f_ex%3d300x300&m=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fkenkocom%2fcabinet%2fe187%2fe187094h_m2.jpg%3f_ex%3d80x80)
塩麹 140g/麹(こうじ)/税込980以上送料無料塩麹 140g[麹(こうじ)] |
普通の塩の替わりに塩麹を使うと旨みが1.2倍になるってTVで言ってました。
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();
}
});
//スクロールバーがクリックされたときは当該方向へ１つスクロールします。
//（※全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>
jqueryで上下左右+斜めに移動するスライドショー
最近jqueryにハマってる管理人です( ´ー`)
そんなわけで、jqueryで上下左右だけでなく斜めにも移動するスライドショーというのを作ってみました。
詳細はまた後日。
RapidSVN
仕事の関係でSubversionを使用することになったのだが、クライアントを最初Eclips+Subversionにしてみたのがいいが、やっぱりEclipsの重たさが気に喰わないの(私の嫌いなJavaも使ってるし)で、別のクライアントを探してみた。
有名どころだとTortoiseSVNなんだろうけど、エクスプローラにTortoiseSVNが組み込まれるのが嫌だったので、最終的にRapidSVNに落ち着いた。
ちゃんと日本語表記になってるしステキ！
日本語ファイル名はNGらしいが、日本語ファイル名は使わないのでおｋ
「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内に文章入れたサンプルにした為追加、それ以外は前回と同じ
■完成品(デモ)
http://cmf.ohtanz.com/slidebox2/
KDDIからiPhone5だと！？
昨日の日経ビジネスの記事に衝撃が走っておりますが、本当に発売されるのかしら？
もしこれで、WiMAX搭載でデサリングが出来ちゃったりしたら無敵なんじゃないの？
KDDIにGigazineさんが問い合わせてますね。
【速報】KDDIにiPhone 5発売報道について問い合わせてみた
ノーコメントって・・・発売しますと言っているようなものじゃ・・・
少なくとも、Appleとごにょごにょしてるってことですよね。
まぁ仮に発売されたとしても、特にiPhoneに興味が無い人なので買い換えるなんてことはしませんが( ´ー`)
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
ちなみにスマートフォンにも対応しています。
ただ、iscrollやjQuery.flickableなどのフリックスクロール化させる類のモノと相性が悪いようで、タブのクリックができなくなります。
その場合はクリックイベントからタッチイベントに変えてあげると動作してくれます。(たぶん・・・一応自分のスマフォでは動いてた)
$('.tab-box').click(function() {});
↓に変更
$('.tab-box').bind('touchstart', function() {});
