ホームページ制作関連の技術ネタを備忘録的にまとめています

レスポンシブデザインの際に、PC用とスマホ用で別のJSを使用する必要があったので、
その方法を記載しておきます。

<script type=”text/javascript”>
jQuery(document).ready(function($) {
if (window.matchMedia( ‘(min-width: 768px)’ ).matches) {
$.ajax({
url: ‘●●●●●_pc.js’,
dataType: ‘script’,
cache: false
});
} else {
$.ajax({
url: ‘●●●●●_sp.js’,
dataType: ‘script’,
cache: false
});
}
});
</script>

ブレイクポイントはCSSに合わせて適宜変更する必要があります。

また、Google Chromeではローカル環境では正しく動作しないため、サーバー上で確認する必要があります。

スマートフォンサイトでは、PCサイトとは違いマウスがありませんのでロールオーバー効果は表現できませんが、タップしたときにロールオーバーのような効果をつけることはスマホサイトでも可能です。

検索してもaddClass()やremoveClass()を使用したclass操作だったり、background-imageを利用した操作だったりと手間がかかるため簡単に画像を差し替えられるスクリプトを作成しました。

<img>にclassを設定するだけで、タップしたときに画像が切り替わります。

スクリプトは下記になります。
rollover.jsのような名称を付けたファイルに保存しておいて、使用するときはjQueryと一緒に読み込むようにするとソースもすっきりします。

プリロード機能もあるので、手間いらずです。

//ロールオーバー用画像のプリロード

$(function(){
$(“.rollover”).each(function(){
if(String($(this).attr(“src”)).match(/_off\.(.*)$/)){
var img = new Image();
img.src = String($(this).attr(“src”)).replace(/_off\.(.*)$/,”_on.$1″);
}
});
});

//_offと_onを切り替える

$(function(){
$(“.rollover”).bind(“touchstart”,function(){
$(this).attr(“src”,$(this).attr(“src”).replace(“_off.”, “_on.”));
});
$(“.rollover”).bind(“touchend”,function(){
$(this).attr(“src”,$(this).attr(“src”).replace(“_on.”, “_off.”));
});
});

【使い方】

jQueryと上記のソースを外部ファイル化（rollover.js）したものを読み込んで、イメージにクラスを指定するだけです。

その際、画像のファイル名は、「_off.拡張子」というように、「_off」のついた名称にする必要があります。

<img src=”hogehoge_off.jpg” class=”rollover”>