Pc&Web

スマホでもPCと同じマウスオーバーの効果を与える方法

eyecatch-jquery-touchstart

スマホでサイトを表示した時にも、PCと同じマウスオーバーの効果を与える方法を紹介します。

スマホでは、マウスは使わずにタッチ操作です。そこで、タッチする時と離した時に、変化をさせる様に設定してあげます。

base.jsに以下のコードを追加する

var linkTouchStart = function(){
thisAnchor = $(this);
touchPos = thisAnchor.offset().top;
moveCheck = function(){
nowPos = thisAnchor.offset().top;
if(touchPos == nowPos){
thisAnchor.addClass("hover");
}
}
setTimeout(moveCheck,100);
}
var linkTouchEnd = function(){
thisAnchor = $(this);
hoverRemove = function(){
thisAnchor.removeClass("hover");
}
setTimeout(hoverRemove,500);
}

$(document).on('touchstart mousedown','a',linkTouchStart);
$(document).on('touchend mouseup','a',linkTouchEnd);

これで、PCでマウスオーバーした時と同じ効果を、スマホでも表現できます。

[memo title=”MEMO”]コードのクラス名「hover」は、使用するスタイルのクラス名に変更してください。

[/memo]

 

STINGER5で使用するには

ドメイン名/public_html/wp-content/themes/stinger5verxxxxxxxx/js/base.js 「base.js」に追加でOKです。  

 

さいごに

STINGER5のアップデートをすると、base.jsが上書きされてしまうので、注意してください。

ABOUT ME
ねこのてそう
ねこのてそう
妻、娘、ネコと暮らす、超記憶力の悪い30代のオッサン。 好きな言葉は、死ぬこと以外、かすりキズ。 尊敬する人は絵を描ける人とピアノを弾ける人。嫌いなものはタバコ。 元2ちゃんねる管理人ひろゆきが好き。(趣味と思考が似てる) ニコニコ生放送の、暗黒リスナー歴9年。

POSTED COMMENT

  1. 中野 より:

    恐れ入りますが、この記事の方法を用いたスマホ(iPhone SE)から動作確認出来るデモページはないのでしょうか?
    是非に応用させて戴きたくて、デモページでどんな様子か確認出来たら嬉しいのですが。

    • nekonotesou nekonotesou より:

      サンプル作成してみました。(少しデザインが崩れていますが…)
      記事ではSTINGER5ですが、ファイルが見つからなかったので、STINGER8を代用しています。
      それと、記事にクラス名を変更することを書き忘れていたので、追記しています。

      https://nekonotesou.com/?p=1

  2. 中野 より:

    早速のサンプルページの作成をほんとにありがとうございました、感謝申し上げます。
    サンプルではタップで瞬時に遷移してしまうので、PCのhover+クリックのような感触とは若干違和感があるんですが、その当たりは調整出来そうですので、ワクワクして来ました(笑)

    ほんとにありがとうございました m(_ _)m