JavaScriptプログラムに関する各種メモ書き

ウィンドウサイズ変更を検知してサイズによって画像サイズを変更する

以下のようにウィンドウサイズによって画像サイズを変更したい時があります。

・画面サイズ(横幅)が800px 以下の場合は 800px固定

・画面サイズ(横幅)が800px 以上の場合は 100%(横いっぱい)

jQueryを使って以下のようにします。

<img id="hogehoge" src="./test.jpg" width="800" />
<script>
function liquid_image(){
    var wh = jQuery(window).height();
    var ww = jQuery(window).width();
    if (ww > 800){
        jQuery('#hogehoge').css("width", "100%");
    }
    else{
        jQuery('#hogehoge').css("width", "800px");
    }
}
jQuery(document).ready(function(){
    liquid_image()
});
jQuery(window).resize(function(){
    liquid_image()
});
</script>

jQueryのウィンドウサイズ変更を検知するイベント

jQuery(window).resize(function(){
// ここに処理を記述
});

jQueryの画面スクロール変更を検知するイベント

jQuery(window).scroll(function () {
// ここに処理を記述
});

関連エントリー

No.869
01/26 19:25

edit

画像
jQuery