webサイト制作の勉強|1月ブログ

webサイト制作の勉強に関する解説ブログです。

bodyの幅によってimg画像を切り替える

まずは切り替えたい画像に指定の名前を付ける。
sp用の画像には「_sp」
pc用の画像には「_pc」


切り替えたい画像のimgタグに指定のクラス名を指定する。

<ul class="bxslider">
  <li><img src="img/img_keyvisual_01_sp.jpg" class="switch"></li>
  <li><img src="img/img_keyvisual_02_sp.jpg" class="switch"></li>
  <li><img src="img/img_keyvisual_03_sp.jpg" class="switch"></li>
</ul>

window.innerWidth
「window.innerWidth」とはブラウザウィンドウの ビューポート (viewport) の幅を取得出来る。


thisと$thisの違い
「$(this)」はjQueryオブジェクト。
「this」はDOMエレメント。
違いを簡単に説明すると、イベントが発生した要素に対して、javaScriptのメソッドやプロパティを利用したい時は「this」利用し、jQueryで操作したい時は$(this)を利用してjQueryオブジェクトに変換してから利用する。
「this」の持つ情報はjavaScriptで操作できる「DOM要素」です。イベントで設定したfunction内で利用した場合はイベントが発生したDOM要素を指します。



www.jquerystudy.info


//ウィンドウサイズによる画像置換

  var sizeChange = $('.switch'), // 置換の対象とするclass属性。
  pcName = '_pc', // 置換の対象とするsrc属性の末尾の文字列
  spName = '_sp',// 置換の対象とするsrc属性の末尾の文字列
  replaceWidth = 767; // 画像を切り替えるウィンドウサイズ。


  sizeChange.each(function(){
  var $this = $(this);
  function imgSize(){
  if(window.innerWidth > replaceWidth) { // ウィンドウサイズが768px以上であれば_spを_pcに置換する。
  $this.attr('src',$this.attr('src').replace(spName,pcName));
            } else {
                $this.attr('src',$this.attr('src').replace(pcName,spName));
            }
		}
		$(window).resize(function(){imgSize();});
	imgSize();
	});