jQueryゼロから / SlideScroll (指定の要素を横スクロール)


スクロールと言ってもウィンドウではなく、ページの要素の一部をスクロールさせます。
まずは下記のような構成のHTMLを用意します。

1
2
3
<div id="scroll">
    <div id="layer"></div>
</div>

指定の枠(div#scroll)の中を要素(div#layer)が横スクロールする事にします。
内容は面倒なので下記のJavaScriptで自動生成させます。

1
2
3
4
5
for (var i = 0; i < 100; i++) {
    $('#layer').append('<span style="float: left;"><img src="space.gif" width="10px" height="100px" /></span>n');
}
$('#layer').find('span:odd').css('background-color', '#000000');
$('#layer').find('span:even').css('background-color', '#FFFFFF');

CSSで外枠からはみ出た部分は非表示にしつつ、スクロールする部分はposition: absoluteに。

1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
#scroll {
    width: 300px;
    height: 100px;
    overflow: hidden;
    position: relative;
}
#layer {
    width: 1000px;
    height: 100px;
    position: absolute;
}
</style>

あとは表示位置を少しずつずらせばスクロール出来ます。
setTimeoutの 1000 / 30 は秒30フレームで更新させたいので、1000ミリ秒を30で割り算してます。

1
2
3
4
5
6
7
8
9
10
11
$(function(){
    var x = 0;
    setTimeout(function(){
        $('#layer').css({ left: x });
        x--;
        if (x < -1000) {
            x = 0;
        }
        setTimeout(arguments.callee, 1000 / 30);
    }, 0);
});

サンプル

2011.01.28 追記
実際に無限ルーブさせるには、スクロール部分の両端が綺麗につながるようにします。上記サンプルでは単に座標リセットしてますが、単純な繰り返しパターンじゃない場合は、左端と同じ要素をのりしろ的に右端に追加したほうがいいです。(※意味不明だな…サンプルにも追記したので参照くださいな)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です