画面幅を変えると発生するイベント

JavaScript

2014.03.122017.02.14

JavaScriptの勉強で画面幅を変えると発生するイベントについてあれこれ試してみた。

正しいのか正しくないのかわかりませんが、とりあえず動きました。
→ テストページ

・指定した３サイズごとにメッセージを変更。
・画像を置き換え
・bodyにidをつける
・画面サイズを表示

の4点です。

Windows8.1：Chrome33、Firefox27、IE11、ではOKのもよう。
Android4.1.2：Chrome33.1750.132、標準ブラウザ？、ではOKのもよう。

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
</head>
<body>

<p>画面サイズを変えると発生するイベントをあれこれつけてみた。<p>

<script>
function resizeEvent(){
  var size = jQuery(window).width();
  if( size >= 950){
    jQuery("#message").html("画面の幅 = " + screen.width + " px<br />" +
                   "画面内の幅 = " + window.innerWidth + " px"); //画像の現サイズを表示してみる

    jQuery('#image').css("width", "800px"); //画像のサイズを変更してみる
    
    // 画像を置き換えてみる
    jQuery('#image').each(function(){
      var newurl = jQuery(this).attr('src').replace(/small.jpg/ig, 'big.jpg');
      jQuery(this).attr('src', newurl);
    });

  }else if(size >= 480 && size < 950 ){
    jQuery("#message").html("画面の幅 = " + screen.width + " px<br />" +
                   "画面内の幅 = " + window.innerWidth + " px"); //画像の現サイズを表示してみる
    jQuery('#image').css("width", "400px"); //画像のサイズを変更してみる
    
    // 画像を置き換えてみる
    jQuery('#image').each(function(){
      var newurl = jQuery(this).attr('src').replace(/big.jpg/ig, 'small.jpg');
      jQuery(this).attr('src', newurl);
    });

  }else if( size < 480 ){
    jQuery("#message").html("Windowサイズ480px以下だよ"); //テキストを表示してみる
    jQuery('#image').css("width", "200px"); //画像のサイズを変更してみる
    jQuery("body").removeClass().addClass("new"); //bodyについてるクラスを消して、新たにnewというクラスをつけてみる
  }
};
jQuery(window).ready(function(){
    resizeEvent();
});
jQuery(window).resize(function(){
    resizeEvent();
});
</script>

<div id="message"></div>
<img id="image" src="./image_big.jpg" width="800" />

</body>
</html>

ソースの中で「jQuery」と書いた部分は「$」でもOKなんだって。
省略形ということでしょうか。

人気記事

コメント