jQueryを使った簡単な実装例

目次

本日は以下の内容をザックリと紹介します！

• 応用1) ロールオーバー
• 応用2) スムーススクロール
• お・ま・け

応用1) ロールオーバー

JSでロールオーバーを実装する場合のオレオレ要件。

• HTMLを必要以上に汚さない
• 導入は出来るだけ簡単に
• ロールオーバー画像のプリロード(先読み)

つまり・・・

HTMLではロールオーバー前の画像を指定するだけにして、

ロールオーバーはファイル名の末尾に_onを付けてsrc属性を書き換えて、

既に_onが付いていたらロールオーバーしないようにして、

<nav>
    <ul>
        <li><a href="page1"><img src="images/page1_on.png"></a></li>
        <li><a href="page2"><img src="images/page2.png"></a></li>
        <li><a href="page3"><img src="images/page3.png"></a></li>
    </ul>
</nav>

あとはプリロード機能を付ければ要件は満たせそう。

応用1) ロールオーバー

こんな感じになりました。

jQuery(function($) {
    var suffix = '_on';
    $('nav a img').each(function() {
        var img  = $(this);
        var src  = img.attr('src');
        var name = src.substr(0, src.lastIndexOf('.'));
        var ext  = src.substring(src.lastIndexOf('.'));
        if (name.match(suffix + '$')) return;
        var src_on = name + suffix + ext;
        $('<img>').attr('src', src_on);
        img.hover(
            function() { img.attr('src', src_on); },
            function() { img.attr('src', src); }
        );
    });
});

応用1) ロールオーバー

やったー！できたー！

ちなみにプリロード機能が無いと・・・

今回のコードはプラグイン化していませんが、プラグイン化することでもっと使い易くなるはずです！

応用2) スムーススクロール

まずは、スムーススクロールの例を見てみましょう。

こんな感じのスルッスルのスクロールを、jQueryなら超簡単に実装できます。

jQuery(function($) {
    $('a[href^="#"]').click(function() {
        var target = $(this.hash);
        var top = target.offset().top;
        $('html, body').animate({scrollTop: top}, 1000);
        return false;
    });
});

すごく簡単ですね！さすがjQuery！

※このままだとOperaで動かないかも知れないよ！詳細はググってね！

お・ま・け

delayメソッドとdequeueメソッドのそれっぽい使い方

delayメソッドとは、キューを指定秒数遅らせる・・・

ザックリ言うと、直後に指定されたアニメーションの実行を指定秒数遅らせるメソッドです。

jQuery(function() {
    $('#message')
        .delay(2000)
        .slideUp();
});

お・ま・け

dequeueメソッドとは、実行中のキューを中断して・・・

ザックリ言うと、実行中のアニメーションやdelayを中断して、次のアニメーションを実行するメソッドです。

指定秒数待たずにメッセージを消したい場合に、dequeueメソッドを使うとそれっぽくなります。

jQuery(function() {
    $('#message')
        .delay(2000)
        .slideUp()
        .click(function() { $(this).dequeue(); });
});

なんとなくそれっぽい感じがしますね。します。

色々応用すると面白いことが出来るかも知れません。