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

jQueryゼロから / BlackOut (Lightboxの背景のような効果)

2011.07.07追記: ウィンドウサイズ変えてもズレないようにこちらに修正
jQueryゼロから / BlackOutふたたび

Lightbox的な背景が暗くなるアレです。
背景用に適当に<div id=”layer”>とか用意しておいて、下記のようなCSS設定します。
注意するのはz-indexくらい?

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
#layer {
    position: absolute;
    z-index: 100000;
    background: #000000;
    top: 0px;
    left: 0px;
    filter: alpha(opacity=0);
    opacity: 0.0;
    display: none;
}
</style>

クリックでこの<div>をウィンドウサイズにしてから、フェードインさせます。
とりあえず、トリガは<a class=”blackout”>にしておきます。

1
2
3
4
5
6
7
8
$('a.blackout').click(function(){
    var width  = $(document).width();
    var height = $(document).height();
    $('#layer').width(width)
               .height(height)
               .show()
               .fadeTo('slow', 0.8);
});

クリック後にWindowサイズを取得すれば、ページ読み込み後にWindowサイズを変えても問題ないです。ただ、Blackoutした状態でWindowサイズ変えると恥ずかしい感じになります…(2011.07.07 修正してます)
レイヤーをクリックすると閉じるようにしときます。

1
2
3
4
5
$('#layer').click(function(){
    $(this).fadeTo('fast', 0, function(){
        $(this).hide();
    });
});

サンプル

jQueryゼロから / scroll (指定位置にオートスクロールさせる)

jQueryではstyle属性をanimateでいじれます。
フェードイン・フェードアウトさせたいならopacity属性を0〜1でアニメーションとか。
ここでは、よくあるスクロールを指定します。

1
2
3
var target = $('html, body');
target.animate({ scrollTop: ***, 'slow' });
// *** にスクロールする座標を指定します

追記: 2011/01/31
if (jQuery.support.checkOn) {
  var target = $(‘html’);
} else {
  var target = $(‘body’);
}
という書き方を
var target = $(‘html, body’)
に変更しました。

指定のタグの位置に移動するなどの場合は動的に座標取得したりします。

1
target.animate({ scrollTop: $('#id').offset().top }, 'slow');

サンプル
追記: 2010/11/21 Safari, Chromeでも動作するように $(‘html’) と $(‘body’) の判定入れました
追記: 2011/01/01/31 判定入れなくても$(‘html, body’)って書き方でいけるみたい

JavaScriptで画像をプリロード

2012.01.09追記
読み込み後にエフェクト入れたものはこちら

JavaScriptで動的にタグを書きだしたりすると、その部分の画像が表示されてから読み込まれるのであらかじめ読み込んでおこうというよくある話。
とりあえず画像を配列とかに指定、パスは /images 配下に固定で。
(function(){…})() に記述するのは、他のJavaScriptとか読み込む時に変数名とか重複しないよう念の為。

1
2
3
4
5
6
7
8
9
10
11
(function(){
    var preloadImages = [
        'ooo.jpg',
        'xxx.jpg',
        '***.jpg'
    ];

    for (var i = 0; i < preloadImages.length; i++) {
        (new Image()).src = '/images/' + preloadImages[i];
    }
})();

HTML読み込み時じゃなくて、onload後とかが良ければ下記みたいな感じ。
※jQuery使います

1
2
3
4
5
6
7
8
(function($){
    var preloadImages = [...];
    $(function(){
        for (var i = 0; i < preloadImages.length; i++) {
            (new Image()).src = preloadImages[i];
        }
    });
})(jQuery);