複数のテキストや画像を並べて表示する場合、そのまま並べてしまうと画面が埋まってしまいます。
そんな時のサンプルです。
高さや幅を固定して、はみ出す部分を隠し、ボタンを押すとアニメーションでひとつずつ表示します。
ボックスの数と横幅の値を取得し、どんなサイズでも最初から最後までで止まります。
横幅が％指定なので、スマホの場合だと横幅に合わせ、見えている部分が狭まります。
<
aaa
bbb
ccc
ddd
>
以下がjQuery部分の上部です。
ボックスの横幅やマージンの値を取得し、一つ分の幅でアニメーションを実行します。
連打防止や押せる状態に見せるクラスの操作をしています。
item_size = parseInt($(".box_in").find(".item").css('width'), 10);
item_margin_l = parseInt($(".box_in").find(".item").css('margin-left'), 10);
item_margin_r = parseInt($(".box_in").find(".item").css('margin-right'), 10);
size = item_size+item_margin_l+item_margin_r;
$(".btn_l").on('click', function() {
//戻る
item_cnt = $(this).parent().find(".item").length;
l = parseInt($(this).parent().find(".box_in").css('left'), 10);
ll = l+size;
if(l < 0){
if(l % size == 0){
$(this).parent().find(".box_in").animate({ left:ll+"px"}, 500);
$(this).parent().find(".btn_r").addClass("act");
if(0 == ll){
$(this).removeClass("act");
}
}
}
});
$(".btn_r").on('click', function() {
//進む
item_cnt = $(this).parent().find(".item").length;
min_left = 0 - (item_cnt - 1) * size;
l = parseInt($(this).parent().find(".box_in").css('left'), 10);
ll = l-size;
if(l > min_left){
if(l % size == 0){
$(this).parent().find(".box_in").animate({ left:ll+"px"}, 500);
$(this).parent().find(".btn_l").addClass("act");
if(min_left == ll){
$(this).removeClass("act");
}
}
}
});
以下はスワイプに対応する部分、ほぼクリックと同じ内容です。
$('.box_out').on('touchstart', onTouchStart); //指が触れたか検知
$('.box_out').on('touchmove', onTouchMove); //指が動いたか検知
$('.box_out').on('touchend', onTouchEnd); //指が離れたか検知
var direction, position;
//スワイプ開始時の横方向の座標を格納
function onTouchStart(event) {
position = getPosition(event);
direction = ''; //一度リセットする
}
//スワイプの方向（left／right）を取得
function onTouchMove(event) {
if (position - getPosition(event) > 70) { // 70px以上移動しなければスワイプと判断しない
direction = 'left'; //左と検知
} else if (position - getPosition(event) < -70){ // 70px以上移動しなければスワイプと判断しない
direction = 'right'; //右と検知
}
}
function onTouchEnd(event) {
if (direction == 'right'){//右へスワイプ 戻る
item_cnt = $(this).parent().find(".item").length;
l = parseInt($(this).parent().find(".box_in").css('left'), 10);
ll = l+size;
if(l < 0){
if(l % size == 0){
$(this).parent().find(".box_in").animate({ left:ll+"px"}, 500);
$(this).parent().find(".btn_r").addClass("act");
if(0 == ll){
$(this).parent().find(".btn_l").removeClass("act");
}
}
}
} else if (direction == 'left'){//左へスワイプ 進む
item_cnt = $(this).parent().find(".item").length;
min_left = 0 - (item_cnt - 1) * size;
l = parseInt($(this).parent().find(".box_in").css('left'), 10);
ll = l-size;
if(l > min_left){
if(l % size == 0){
$(this).parent().find(".box_in").animate({ left:ll+"px"}, 500);
$(this).parent().find(".btn_l").addClass("act");
if(min_left == ll){
$(this).parent().find(".btn_r").removeClass("act");
}
}
}
}
}
//横方向の座標を取得
function getPosition(event) {
return event.originalEvent.touches[0].pageX;
}
以下は実装に伴うスタイルですが、要件に応じて調整してください。
.base{
width: 100%;
margin:10px 0;
height:140px;
clear:both;
}
.box_out{
float: left;
width: 90%;
height: 120px;
overflow-x: hidden;
background: #CCC;
padding: 10px 0;
}
.box_in{
width: 600px;
position: relative;
float: left;
}
.box_in .item{
background: #EEF;
width: 120px;
height: 120px;
margin: 0 10px 0 0;
float: left;
line-height:120px;
font-size:20px;
text-align:center;
}
.btn_l{
float:left;
background: #999;
color: #FFF;
height: 140px;
line-height: 140px;
cursor: pointer;
width:5%;
text-align: center;
}
.btn_r{
float:left;
background: #999;
color: #FFF;
height: 140px;
line-height: 140px;
cursor: pointer;
width:5%;
text-align: center;
}
.act{
background: #99F;
}
最後に以下はHTMLのタグです。
複数同じ要素が設置されてもよいように、クラスのみで構成しました。
itemクラスは任意の個数の設置が可能です。
<div class="base"> <div class="btn_l"><</div> <div class="box_out"> <div class="box_in"> <div class="item">aaa</div> <div class="item">bbb</div> <div class="item">ccc</div> <div class="item">ddd</div> </div> </div> <div class="btn_r act">></div> </div>
