質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

811閲覧

スマートフォンにタップするとページ遷移ができない

Leon-Lionking

総合スコア37

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/07/23 01:07

編集2022/01/12 10:55

iPhone にタップすると何故か2回押さないとページ遷移してしまいます。

前提・実現したいこと

実行したい内容
・iPhone タップ1回だけでページ遷移したい
・onMouseover を onTouchstart に切り替えると、タップ1回はページ遷移できますが、扉が開く動作が作動しません。

他のサイトを見て試したこと

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

一部改変してあります。

javascript

1var linkTouchStart = function(){ 2 thisAnchor = $(this); 3 touchPos = thisAnchor.offset().top; 4 moveCheck = function(){ 5 nowPos = thisAnchor.offset().top; 6 if(touchPos == nowPos){ 7 thisAnchor.addClass("link"); 8 } 9 } 10 setTimeout(moveCheck,100); 11} 12var linkTouchEnd = function(){ 13 thisAnchor = $(this); 14 hoverRemove = function(){ 15 thisAnchor.removeClass("link"); 16 } 17 setTimeout(hoverRemove,500); 18} 19 20$(document).on('touchstart onmouseover','a',linkTouchStart); 21$(document).on('touchend onmouseout','a',linkTouchEnd);

該当のソースコード

javascript

js

1(function($){ 2window.onload=function(){ 3 j=0; //角度 4 wH=0; //立幅 5 l=0; //onMouseover時にappendChildされた子要素が追加されると1、remove=0 6 nameNode=0;//onmouseoverされているimg要素を特定、初期値は0 7 o=0; 8 id=["tap01","tap02","page03"];//のid 9 value=[0.90,0.28,0.45]; //画像の位置の初期値 10 value2=[0.35,0.50,0.35]; //画像の位置の初期値 11 v = 1;//扉画像を切り替えるための変数 12 var timer; 13 element = new Array; //back_image()で使用、扉idを指定し、格納する配列 14 ikan(); 15 back_image(); 16 open(); 17} 18 19function open(){ 20 timer = setTimeout(function(){ 21 for(var i=1; i<8; i++){ 22 //var element = document.getElementById('element'+i);//扉idを指定し、読み込む 23 element[i].style.display='none';//一度全てdisplay:none;を指定し、意図的に表示させない 24 } 25 imageP = document.getElementById('element'+v);//切り替えるための変数を添え字として、再度扉idを指定する 26 imageP.style.display='block'; 27 if(v>=7){ 28 v=1; 29 console.log(v + 'v_1'); 30 clearTimeout(timer); 31 }else{ 32 if(nameNode != 0){ 33 v+=1; 34 console.log(v + 'v_2'); 35 open(); 36 }else{//1枚目の扉画像のみを表示 37 v=1; 38 console.log(v + 'v_3'); 39 clearTimeout(timer); 40 } 41 } 42 },200); 43} 44 45function ikan(){ 46 setInterval(function(){//このsetIntervalによって、繰り返し各画像を読み込むため(getName)、ウィンドウのサイズに合わせリサイズされる 47 if(j<360){//0.01秒ずつにpositionで定めた円の大きさに沿って角度を変え移動する値 48 j++; 49 }else{ 50 j=0; 51 } 52 for(i=0;i<7;i++){ 53 getName(i); 54 radius=Math.sin((Math.PI/180)*j); 55 position=radius*20+wH;//円の大きさを20、始りの値をwHで定めている 56 if(!nameNode){ 57 moveTop(position,radius); 58 }else{ 59 if(box==nameNode){ 60 moveTop(wH); 61 }else{ 62 moveTop(position); 63 } 64 65 } 66 } 67 },10); 68} 69 70function getName(i){//imgを特定し、サイズ変更 71 box=document.getElementById(id[i]); 72 wW = $(document).width(); 73 wH = ((wW/16)*10)*value[i]; 74} 75 76function moveTop(topPoint,val2){//各のstyle.topの位置を指定、引数に指定したpositonにより上下移動になる 77 box.style.position = "absolute"; 78 insert = String(topPoint); 79 box.style.top = insert+"px"; 80 bwW = $(document).width() * value2[i]; 81 box.style.left = bwW+"px"; 82 //box.style.opacity = val2+""; 83 84} 85 86window.onMouse = function (name,text){ 87 timer2 = setTimeout(function(){//0.2秒後に変数oに0を代入 88 o=0; 89 },200); 90 nameNode=name;//onmouseoverされているimg要素を特定、初期値は0 91 console.log(o +" o"); 92 addText(text); 93 if(o==0){ 94 open(); 95 } 96 o=1; 97} 98 99window.outMouse = function(name){ 100 l=0; 101 nameNode=0; 102 child=name.childNodes;//onmouseover時にappendChildされた子要素を特定 103 deleteChild=child[1];//removeChildするための処理 104 if(deleteChild){ 105 name.removeChild(child[1]); 106 } 107 v=1;//onMouseで呼び出したopen()で使用している変数vが7に到達しておらず、outMouseした場合に先にvに1を代入しopen()を実行することにより1枚目の画像を表示させる 108 for(var i=1; i<8; i++){//open()がv=7で正常終了している場合、outMouseのタイミングで1枚目の画像を表示させる処理 109 element[i].style.display='none';//一度全てdisplay:none;を指定し、意図的に表示させない 110 } 111 element[1].style.display='block'; 112 /* 113 if(o==0){ 114 open(); 115 } 116 */ 117} 118 119function addText(text){ 120 if(l==0){ 121 var element=document.createElement("div"); 122 element.id = "id"; 123 element.innerHTML=text; 124 element.style.textAlign="center"; 125 element.style.color="gray"; 126 if(text=="white"){ 127 element.style.color="black"; 128 } 129 element.style.backgroundColor = text; 130 element.style.width = "110px"; 131 var objBody = nameNode;//onmouseoverされているimg要素を特定、初期値は0 132 objBody.appendChild(element); 133 l=1; 134 } 135} 136 137function back_image(){ 138 ELEM_WIDTH = window.innerWidth; 139 ELEM_HEIGHT = (ELEM_WIDTH/16)*10; 140 for(var i=1; i<8; i++){ 141 element[i] = document.getElementById('element'+i);//扉idを指定し、読み込む 142 element[i].style.width = ELEM_WIDTH+"px"; 143 element[i].style.height = ELEM_HEIGHT+"px"; 144 } 145 //headerDiv = document.getElementById('header'); 146 //headerDiv.style.width = ELEM_WIDTH+"PX"; 147} 148 149var resizeTimer; 150window.addEventListener('resize', function(event){//img扉のリサイズのため設定 151 152 if (resizeTimer !== false){ 153 clearTimeout(resizeTimer); 154 } 155 resizeTimer = setTimeout(function(){ 156 ELEM_WIDTH = window.innerWidth; 157 ELEM_HEIGHT = (ELEM_WIDTH/16)*10; 158 for(var i=1; i<8; i++){ 159 //var element = document.getElementById('element'+i);//扉idを指定し、読み込む 160 element[i].style.width = ELEM_WIDTH+"px"; 161 element[i].style.height = ELEM_HEIGHT+"px"; 162 } 163 headerDiv = document.getElementById('header'); 164 headerDiv.style.width = ELEM_WIDTH+"PX"; 165 //ikan(); 166 },1); 167}); 168 169

html

1<div class="content"> 2<!-- 扉を開くスクリプトを呼び出す # --> 3<img src="./img/door_1.jpg" id="element1" /> 4<img src="./img/door_2.jpg" id="element2" /> 5<img src="./img/door_3.jpg" id="element3" /> 6<img src="./img/door_4.jpg" id="element4" /> 7<!-- # 扉を開くスクリプトを呼び出す ここまで --> 8 9<p class="tap01" id="tap01" onMouseover="onMouse(this,'ページ1');" onMouseout="outMouse(this);"><a href="./page01/">ページ01に飛ぶ</a></p> 10<p class="tap02" id="tap02" onMouseover="onMouse(this,'ページ2');" onMouseout="outMouse(this);"><a href="./page02/">ページ02に飛ぶ</a></p> 11<p class="tap03" id="tap03" onMouseover="onMouse(this,'ページ3');" onMouseout="outMouse(this);"><a href="./page03/">ページ03に飛ぶ</a></p> 12</div>

※CSSは割愛させていただきます。

ご教示お願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/07/23 01:58

onMouseover,onMouseoutを除いた場合はどうなりますか?
Leon-Lionking

2018/07/31 04:19 編集

タップが1回になりますが、外したら、扉が開くスクリプトが作動しなくなります。
m.ts10806

2018/07/23 05:03

では、pを外してaだけにした場合はどうですか?
退会済みユーザー

退会済みユーザー

2018/08/01 23:25

touchstart => click でもだめですか??
guest

回答2

0

JSには疎いので,ソースコードは全く読んでいませんが,
質問文を読む限りだと,CSSだけで十分実装できそうなので,ヒント(擬似クラスの活用)を投稿しておきます


例えば以下のようなCSSを適用すると,

css

1.the_btn{ 2 border: 1px solid gray; 3} 4 5.the_btn:hover, 6.the_btn:active{ 7 background: skyblue; 8 transition: .5s; 9}

the_btnクラスを与えられた要素にマウスオン(:hover)した際と,クリック/タップ(:active)した際の両方に同じアニメーション(背景色の変更)が適用されます

もし,スマホの場合のみこのような動作にしたいということであれば,JSでブラウザのUserAgentを判定し,スマホの場合にCSSを追加するようにすればよいです


擬似クラスには他にも,:link, :visited, :focus, :nth-child, ...などなど沢山あります

特に,aタグによく適用される「:link,visited,:hover,:active」は,LoVe & HAte(愛と憎しみ)の順番で配置することになっています
(∵CSSは上から順番に適用されるので,この順番にしないと,正しく動かないことがあります)


尚,「扉が開く」などの複雑なアニメーションも,現行版のCSSなら実装可能です

上記サイトを参考にしながら回転・変形系のプロパティを設定したり,擬似要素(例:::before)を使ったりすることで,扉を再現できるのではないでしょうか

(ブラウザ毎の解釈の違いには少し注意が必要ですが,いずれ解消されるか,ベストプラクティスが集積されていくでしょう)


元々のアプローチとは全くことなる方法ではありますが,CSSだけでも,かなり様々なことができるようになってきているので,もし良ければお試しください^^

投稿2018/08/01 13:31

liveasnotes

総合スコア1284

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

aタグのクリックイベントを無効にして、タッチイベントを使用してください。
参考URL

投稿2018/07/23 07:51

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Leon-Lionking

2018/07/25 05:31

clickイベントを無効にして、touchイベントにしたら、飛びますが… 扉を開くスクリプトが動きません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問