タグ別アーカイブ: jQuery

jQuery：ページアクセス、リンク時にフェードする方法

Posted on by
4

jQueryを使用してサイトアクセス時にページ内容をフェードインさせる方法と、
リンクをクリックした時にフェードアウトしてからページ遷移する方法をメモします。

フェードイン、フェードアウトするのに下記のメソッドを使用しています。

fadeIn([speed], [callback])

指定した要素をフェードインして表示します。

fadeOut([speed], [callback])

指定した要素をフェードアウトして非表示にします。

※[callback]は処理終了時に実行する内容を記述します。

■ フェードイン、フェードアウトする方法

「wrapper」の内容がフェードインして表示されます。
また、リンクをクリックするとフェードアウトしてページ遷移します。

【JS】

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

    // サイトアクセス時に非表示にしてから、フェードインさせる
    $('#wrapper').hide();
    $('#wrapper').fadeIn(2000);
    
    // リンククリック時にフェードアウトしてから、画面遷移する
    $('a').click(function(){
        // URLを取得する
        var url = $(this).attr('href');

        // URLが空ではない場合
        if (url != '') {
            // フェードアウトしてから、取得したURLにリンクする
            $('#wrapper').fadeOut(1000);
            setTimeout(function(){
                location.href = url;
            }, 1000);
        }
        return false;

    });
});
</script>

【HTML】

<body>
    <div id="wrapper">
        ページ内容を記載<br>
        <a href="http://raining.bear-life.com/">リンク</a>
    </div>
</body>

フェードイン、フェードアウトするスピードを調整する場合は、
「fadeIn()」、「fadeOut()」、「setTimeout()」の数値を変更します。

また、コンテンツごとに設定することも可能なので、動きのあるサイトを作ることができると思います。

 

※下記、追記します。

aタグに「target=”_blank”」を付けていた場合、正常に動作しないのでフェードさせるリンクにclassを追加して調整しました。

【JS】

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

    // サイトアクセス時にbodyを非表示にしてから、フェードインさせる
    $('#wrapper').hide();
    $('#wrapper').fadeIn(2000);
    
    // リンククリック時にフェードアウトしてから、画面遷移する
    $('a.fadelink').click(function(){
        // URLを取得する
        var url = $(this).attr('href');

        // URLが空ではない場合
        if (url != '') {
            // フェードアウトしてから、取得したURLにリンクする
            $('#wrapper').fadeOut(1000);
            setTimeout(function(){
                location.href = url;
            }, 1000);
        }
        return false;

    });
});
</script>

【HTML】

<body>
    <div id="wrapper">
        ページ内容を記載<br>
        <a href="http://raining.bear-life.com/" class="fadelink">リンク</a><br>
        <a href="http://raining.bear-life.com/" target="_blank">リンク</a>
    </div>
</body>

フェードさせるリンクに「class=”fadelink”」を追加しております。
そしてjQueryの処理で「$(‘a.fadelink’).click(function(){」の箇所を変更してます。

今までは、aタグをクリックした場合の処理を記述してましたがクラスが設定されているリンクの場合にしました。

 

■ サンプルページを追加しました。

【jQuery】ページアクセス、リンク時にフェードする方法｜サンプルページ

 

jQuery：虫眼鏡のように画像を拡大するプラグイン「loupe」

Posted on by
返信

jQueryで画像にマウスを合わせた時、虫眼鏡のように画像の一部を拡大して表示したい場合があります。
jQueryのプラグイン「loupe」を使用すれば簡単に設定することが可能です。

jquery_loupe

ファイルがとても軽くて、設定の仕方も簡単なので楽に実装することができます。

今回は、jQueryのプラグイン「loupe」を使用して、画像にマウスを乗せた時に画像の一部を拡大させ、
虫眼鏡（ルーペ）のように表示させる方法をメモします。

下記URLよりダウンロードして使用します。

https://github.com/jdbartlett/loupe

■ 「loupe」の使用方法

「jquery.loupe.js」をダウンロードし下記のように設定します。

【JS】

「jQuery」とダウンロードした「jquery.loupe.js」を読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.loupe.js"></script>

クラスを「zoom」で指定した画像に対して、ルーペ（loupe）を使用するように設定します。
また、ルーペの幅、高さを指定しています。

<script type="text/javascript">
$(function() {
    $('.zoom').loupe({
        width: 200,
        height: 200
    });
});
</script>

【CSS】

マウスをあわせた時の虫眼鏡のスタイルを記述します。

<style type="text/css">
.loupe {
    border: 1px solid #000;
}
</style>

【HTML】

imgタグに「class=”zoom”」を記述しています。
また実際のサイズより小さいサイズで表示するように幅を指定しています。

<img src="sample.jpg" class="zoom" width="300" />

aタグで指定する場合は下記のように記述します。

<a class="zoom" href="sample.jpg">
    <img src="sample.jpg" width="300" />
</a>

大きい画像と小さい画像を用意して、imgタグに標準で表示する画像を設定し、
aタグに拡大する画像を設定することも可能です。
また、全く別々の画像を指定することも可能です。

上記の設定が完了後、設定した画像の上にマウスを持っていきます。

jquery_loupe1

マウスを画像にあてると、虫眼鏡のように画像が拡大して表示されます。

jquery_loupe2

簡単に設置することができるし、ショッピングサイトなど
色々な場面で使用できそうなのでオススメです。

jQuery：jquery.gmap3を使用して、住所からGoogle Mapsを出力

Posted on by
返信

Google MapsをWEBサイトに表示させることはよくあることだと思います。

住所が固定の場合は、Googleマップから住所を検索し、HTMLコードを取得すれば簡単に組み込むことができますが、
入力された住所からGoogle Mapsを出力したい場合、「jquery.gmap3」を使用すれば簡単に住所からGoogleマップを出力することが可能です。

jquery_gmap3

下記に住所からGoogle Mapsを出力した時の使用方法をメモします。

■ jquery.gmap3

jquery.gmap3

「Google Maps API V3」を使用したプラグイン。
住所や座標からGoogleマップを表示することが可能です。

■ 「jquery.gmap3」使用方法

【JS】

「Google Maps API」と「jQuery」を読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

ダウンロードしたプラグインを呼び出し、下記のコードを記述します。
「address」の箇所に出力したい場所の住所を記述します。
「latitude」と「longitude」は座標で指定する場合記述します。
二つ記述した場合は「address」の方が優先されるそうです。

<script type="text/javascript" src="/js/jquery.gmap3.js"></script>
<script type="text/javascript">
$(function() {

    $("#gMap").gmap3({
        address: '東京都港区台場',
        latitude: 35.630497,
        longitude: 139.778471,
        zoom: 12,
        navigationControl: true,
        mapTypeControl: true,
        scaleControl: true,
        markers: [{
            address: '東京都港区台場',
            latitude: 35.630497,
            longitude: 139.778471,
        }]
    });

});
</script>

マーカーを指定する場合は「markers」に指定したい場所を記述します。

【CSS】

表示するGoogle Mapsの幅、高さを指定します。

<style type="text/css">
div#gMap {
    width: 400px;
    height: 300px;
}
</style>

【HTML】

表示したい箇所に下記のコードを記述します。

<div id="gMap"></div>

住所や座標からGoogle Mapsを出力できるのでとても便利です。
他にもマーカーオプションなど設定の方法が色々あるので、とても使いやすいと思います。

jQuery：setTimeoutを使用してHTMLや画像を遅らせて出力

Posted on by
返信

HTMLで画像や出力データをアクセス時より遅らせて出力したり、処理をしたりしたい場合があります。

jQueryのsetTimeoutを使用すれば、指定した時間の後に出力させることが可能です。

■ setTimeout

指定した時間（秒数）の後に処理を実行します。

$(function(){
	setTimeout(function(){
		// 処理を記載
	}, 2000);
});

■ setTimeoutの使用例

【jQuery】

1秒後に処理を実行します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

    var str = '遅らせて出力する内容';

    // 1秒後に出力する
    setTimeout(function(){
        $('.output').append(str);
    }, 1000);

});
</script>

【HTML】

出力したい場所に下記のコードを記述します。

<div class="output"></div>

指定した時間の後に処理を実行できるので、重い画像や複雑な処理をするときなどに便利だと思います。

jQuery：フォームの値を取得・設定する方法

Posted on by
返信

jQueryでフォームのテキストやセレクト、ラジオボタンなどのvalueの値を取得したり、設定したい場合があります。
jQueryのval()を使用すれば、簡単に値を取得・設定することが可能です。

■ val()

指定したフォームのvalue属性を操作する際に使用します。
引数を指定した場合は値を設定し、valueの値を取得する場合は引数なしで呼び出します。

$("").val();

■ フォームの値を取得する

下記はボタン押下時にテキストに入力された値を取得する場合の処理です。

【jQuery】

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // ボタンをクリックした場合
    $("#btn").click(function () {
        // フォームの値を取得
        str = $("#hoge").val();
        alert(str);
    });
});
</script>

【HTML】

<input type="text" name="hoge" id="hoge" value="" />
<input type="button" id="btn" name="btn" value="取得" />

■ フォームの値を設定する

下記はボタン押下時にテキストに値を設定する場合の処理です。

【jQuery】

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // ボタンをクリックした場合
    $("#btn").click(function () {
        var str = "設定する値";
        // フォームの値を設定
        $("#hoge").val(str);
    });
});
</script>

【HTML】

<input type="text" name="hoge" id="hoge" value="" />
<input type="button" id="btn" name="btn" value="設定" />

選択した値によって別のフォームを変えたりできるので、色々な場面で便利です。