webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき
読者です 読者をやめる 読者になる 読者になる

webかたつむり

ウェブデザインを勉強中

課題 mobileFirst / 画像置換

ウィンドウサイズによって画像を変える。

  • imgに文字要素が含まれている場合、画像が小さくなると当然文字も小さくなる。
  • PCの横長、SPの縦長を一つの画像で賄うことにはそもそも無理がある。
  • 変換するファイルにはクラス名をつける。今回の場合「convert」というクラス名をつけた。
  • 入れ替える画像のファイル名は接尾辞のみ変えておく。
  • PC用は「****_pc.jpg」SP用は「****_sp.jpg」といった具合。
  • var convert=$('.convert');「convert」クラスがついた要素全体のオブジェクトを変数化。
  • var eachOne=$(this);「convert」クラスがついた要素それぞれ一つ
  • 「.each」セレクタで指定したjQuery object、それぞれに対して関数を反復して実行する。
  • いま、関数が操作を実行しているjQuery object が「this」。

    so the keyword this refers to the element.

  • 「window.innerWidth」スラーダーを除いたウィンドウの横幅全体の長さ。
  • $(window).resize(function(){convert();});
    convert();
  • 「.resize」resizeはイベント。ウィンドウの幅を変更するという「動作」
  • ウィンドウのサイズを変更したときに、function convertを実行する。
  • 下段のconvert();は読み込みの具合で、挙動がおかしくならないようにするためらしい。

f:id:ohta-felica:20160828230043p:plain

 

f:id:ohta-felica:20160828230445p:plain

 

f:id:ohta-felica:20160829004324p:plain

 

 //ウィンドウサイズによる画像置換
$(function(){
var convert=$('.convert'); 
var sp='_sp';

var pc='_pc';

var replaceWidth=641;

convert.each(function(){
var eachOne=$(this);

function convert(){
if(window.innerWidth>replaceWidth){
eachOne.attr('src', eachOne.attr('src').replace(sp, pc));
}else{
eachOne.attr('src', eachOne.attr('src').replace(pc, sp));
}
}
$(window).resize(function(){convert();});
convert();
});
});