2022.07.20
【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの?違...
制作
動画
2021.06.07
画像をレスポンシブで切り替える場合に、cssのメディアクエリを使い、display:none(block)
で切り替えている場合が多いかと思います。
しかしjQueryを使えば、CSSの記述が不要になります。
以下Codepenの幅を変えていただくと、空の画像が切り替わります(Result画面のみにしてみたり、HTMLやJSなどの言語タブを表示したりしてみてください)。
見づらい場合は、右上の「EDIT ON CODEPEN」をクリックするとCodepenの編集ページに飛ぶことができます。
See the Pen 【jQuery】PCとSPで画像切替 by spiqa design (@spiqa_design) on CodePen.
①PC用の画像には「xxx-pc.jpg」と命名
SP用の画像には「xxx-sp.jpg」と命名
今回は「sky-pc.jpg」と「sky-sp.jpg」として、PCとスマホで夕空と青空を切り替えます。
②HTMLにはPC版の画像のみマークアップし、「rwd」クラス名を付ける
<img class="rwd" src="http://note.spiqa.design/wordpress/wp-content/uploads/2021/04/sky-pc.jpg" />
③JSに下記を入力する
//切り替えポイント
var rwdPoint=768;
function slideImgChange(){
if($(window).width()<rwdPoint){
$("img.rwd").each(function(){
var changeImg = $(this).attr('src').replace('-pc.' , '-sp.');
$(this).attr('src', changeImg);
});
}else{
$("img.rwd").each(function(){
var changeImg = $(this).attr('src').replace('-sp.' , '-pc.');
$(this).attr('src', changeImg);
});
}
}
//読み込み時の処理
slideImgChange()
//リサイズ時の処理
$(window).on('resize', function(event) {
event.preventDefault();
slideImgChange();
});
・画像のクラス名の”rwd”とjQuery内の$("img.rwd")
を合わせる
・画像ファイル名の”-pc””-sp”とjQuery内のvar changeImg = $(this).attr('src').replace('-pc.' , '-sp.');
を合わせる
いかがでしたでしょうか。
ぜひご活用ください。
jQueryについての関連記事