ウィンドウサイズによって画像を変える。
- 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();は読み込みの具合で、挙動がおかしくならないようにするためらしい。
- .replaceはjavascriptの関数。jQueryで調べてもでてこない。
//ウィンドウサイズによる画像置換
$(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();
});
});