teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問JavaScriptで一定時間マウスオーバーされた場合のみ関数を実行したいです。

編集履歴

質問編集履歴

3

ミスを訂正

2017/05/19 05:03

投稿

usawb
usawb

スコア26

test CHANGED
File without changes
test CHANGED
@@ -9,8 +9,6 @@
9
9
  ```JavaScript
10
10
 
11
11
 
12
-
13
- // グローバル変数
14
12
 
15
13
  let p_area = document.querySelectorAll(".p_area ");
16
14
 
@@ -26,15 +24,15 @@
26
24
 
27
25
  for(let i=0;i<p_area.length;i++){
28
26
 
29
- (function(i){
27
+ (function(i){
30
28
 
31
- p_area[i].addEventListener("mouseover",function(){
29
+ p_area[i].addEventListener("mouseover",function(){
32
30
 
33
31
 
34
32
 
35
- Flow(true,i);
33
+ Flow(true,i);
36
34
 
37
- },false);
35
+ },false);
38
36
 
39
37
  })(i);
40
38
 
@@ -50,9 +48,9 @@
50
48
 
51
49
  var timerId=setTimeout(function(){
52
50
 
53
- cnsole.log("mouseover");
51
+ console.log("mouseover");
54
52
 
55
-
53
+
56
54
 
57
55
 
58
56
 
@@ -76,25 +74,23 @@
76
74
 
77
75
  for(let i=0;i<p_area.length;i++){
78
76
 
79
- (function(i){
77
+ (function(i){
80
78
 
81
- console.log("mouseout");
79
+ console.log("mouseout");
82
80
 
83
- Flow(false,i);
81
+ Flow(false,i);
84
-
85
-
86
-
87
- },false);
88
-
89
-
90
82
 
91
83
 
92
84
 
93
85
  })(i);
94
86
 
95
- }
96
87
 
97
88
 
89
+
90
+
91
+
92
+
93
+ }
98
94
 
99
95
  ```
100
96
 
@@ -102,14 +98,18 @@
102
98
 
103
99
 
104
100
 
105
- <div class="p_area"></div>
101
+ <div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div>
106
102
 
107
- <div class="p_area"></div>
103
+ <div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div>
108
104
 
109
- <div class="p_area"></div>
105
+ <div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div>
110
106
 
111
- <div class="p_area"></div>
107
+ <div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div>
112
108
 
113
- <div class="p_area"></div>
109
+ <div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div>
110
+
111
+ <div class="p_area" style="width:300px;height:500px;border:solid 1px black;"></div>
112
+
113
+
114
114
 
115
115
  ```

2

コード編集

2017/05/19 05:03

投稿

usawb
usawb

スコア26

test CHANGED
File without changes
test CHANGED
@@ -12,39 +12,7 @@
12
12
 
13
13
  // グローバル変数
14
14
 
15
-
16
-
17
- let inner_product = document.querySelectorAll(".inner_product");
18
-
19
- let product_area = document.querySelectorAll(".product_area");
20
-
21
-
22
-
23
15
  let p_area = document.querySelectorAll(".p_area ");
24
-
25
- let flow_area = document.querySelectorAll(".flow_area");
26
-
27
- let inner_flow = document.querySelectorAll(".inner_flow");
28
-
29
- let tri_top = document.querySelectorAll(".inner_flow .tri_top");
30
-
31
- let tri_under = document.querySelectorAll(".inner_flow .tri_under");
32
-
33
- let ara_area = document.querySelectorAll(".ara_area");
34
-
35
- let more_ara = document.querySelectorAll(".more_ara");
36
-
37
- let more_count = true;
38
-
39
-
40
-
41
-
42
-
43
- for(let i=0;i<product_area.length;i++){
44
-
45
- slide_count_list.push(true);
46
-
47
- }
48
16
 
49
17
 
50
18
 
@@ -54,7 +22,7 @@
54
22
 
55
23
 
56
24
 
57
- // タイトル詳細の表示と表示場所の変更処理
25
+
58
26
 
59
27
  for(let i=0;i<p_area.length;i++){
60
28
 
@@ -74,79 +42,15 @@
74
42
 
75
43
 
76
44
 
45
+
46
+
77
47
  function Flow(flg,i){
78
48
 
79
49
  if(flg){
80
50
 
81
51
  var timerId=setTimeout(function(){
82
52
 
83
- flow_area[i].style.transition = "opacity 2.5s ease-in";
84
-
85
- flow_area[i].style.opacity = "1";
86
-
87
- flow_area[i].style.transform = "scale(1)";
88
-
89
-
90
-
91
-
92
-
93
- if((slide_count_list[0] == true && i==2)){
94
-
95
- flow_area[i].style.left = "-270px";
96
-
97
- tri_top[i].style.left = "255px";
53
+ cnsole.log("mouseover");
98
-
99
- tri_under[i].style.left = "256px";
100
-
101
- tri_top[i].style.transform = "rotateZ(90deg)";
102
-
103
- tri_under[i].style.transform = "rotateZ(90deg)";
104
-
105
- }
106
-
107
-
108
-
109
- if((slide_count_list[0] == true && i==3)){
110
-
111
- tri_top[i].style.left = "255px";
112
-
113
- tri_under[i].style.left = "256px";
114
-
115
- tri_top[i].style.transform = "rotateZ(90deg)";
116
-
117
- tri_under[i].style.transform = "rotateZ(90deg)";
118
-
119
- flow_area[i].style.left = "-270px";
120
-
121
- }
122
-
123
-
124
-
125
- if((slide_count_list[0] == true && i==4)){
126
-
127
- tri_top[i].style.left = "255px";
128
-
129
- tri_under[i].style.left = "256px";
130
-
131
- tri_top[i].style.transform = "rotateZ(90deg)";
132
-
133
- tri_under[i].style.transform = "rotateZ(90deg)";
134
-
135
- flow_area[i].style.left = "-270px";
136
-
137
-
138
-
139
- }
140
-
141
-
142
-
143
- if((slide_count_list[0] == true && i==5)){
144
-
145
- flow_area[i].style.left = "190px";
146
-
147
-
148
-
149
- }
150
54
 
151
55
 
152
56
 
@@ -174,61 +78,15 @@
174
78
 
175
79
  (function(i){
176
80
 
177
- p_area[i].addEventListener("mouseout",function(){
81
+ console.log("mouseout");
178
82
 
179
- flow_area[i].style.opacity = "0";
83
+ Flow(false,i);
180
-
181
- flow_area[i].style.transform = "scale(0)";
182
-
183
- flow_area[i].style.transition = "opacity 0s ease-in";
184
-
185
-
186
84
 
187
85
 
188
86
 
189
87
  },false);
190
88
 
191
- Flow(false,i);
89
+
192
-
193
-
194
-
195
-
196
-
197
- })(i);
198
-
199
- }
200
-
201
- // あらすじの展開
202
-
203
- for(let i=0;i<ara_area.length;i++){
204
-
205
- (function(){
206
-
207
- more_ara[i].addEventListener("click",function(){
208
-
209
- if(more_count == true){
210
-
211
- ara_area[i].style.height = "auto";
212
-
213
- more_ara[i].innerHTML = "閉じる";
214
-
215
- more_count = false;
216
-
217
-
218
-
219
- }else if(more_count == false){
220
-
221
- ara_area[i].style.height = "130px";
222
-
223
- more_ara[i].innerHTML = "もっと見る";
224
-
225
- more_count = true;
226
-
227
-
228
-
229
- }
230
-
231
- },false);
232
90
 
233
91
 
234
92
 
@@ -238,6 +96,20 @@
238
96
 
239
97
 
240
98
 
99
+ ```
100
+
101
+ ```HTML
241
102
 
242
103
 
104
+
105
+ <div class="p_area"></div>
106
+
107
+ <div class="p_area"></div>
108
+
109
+ <div class="p_area"></div>
110
+
111
+ <div class="p_area"></div>
112
+
113
+ <div class="p_area"></div>
114
+
243
115
  ```

1

コードを追加しました。（JavaScript）

2017/05/19 04:43

投稿

usawb
usawb

スコア26

test CHANGED
File without changes
test CHANGED
@@ -5,3 +5,239 @@
5
5
  可能な方法や、代替方法があれば教えていただきたいです。
6
6
 
7
7
  よろしくお願いします。
8
+
9
+ ```JavaScript
10
+
11
+
12
+
13
+ // グローバル変数
14
+
15
+
16
+
17
+ let inner_product = document.querySelectorAll(".inner_product");
18
+
19
+ let product_area = document.querySelectorAll(".product_area");
20
+
21
+
22
+
23
+ let p_area = document.querySelectorAll(".p_area ");
24
+
25
+ let flow_area = document.querySelectorAll(".flow_area");
26
+
27
+ let inner_flow = document.querySelectorAll(".inner_flow");
28
+
29
+ let tri_top = document.querySelectorAll(".inner_flow .tri_top");
30
+
31
+ let tri_under = document.querySelectorAll(".inner_flow .tri_under");
32
+
33
+ let ara_area = document.querySelectorAll(".ara_area");
34
+
35
+ let more_ara = document.querySelectorAll(".more_ara");
36
+
37
+ let more_count = true;
38
+
39
+
40
+
41
+
42
+
43
+ for(let i=0;i<product_area.length;i++){
44
+
45
+ slide_count_list.push(true);
46
+
47
+ }
48
+
49
+
50
+
51
+
52
+
53
+
54
+
55
+
56
+
57
+ // タイトル詳細の表示と表示場所の変更処理
58
+
59
+ for(let i=0;i<p_area.length;i++){
60
+
61
+ (function(i){
62
+
63
+ p_area[i].addEventListener("mouseover",function(){
64
+
65
+
66
+
67
+ Flow(true,i);
68
+
69
+ },false);
70
+
71
+ })(i);
72
+
73
+ }
74
+
75
+
76
+
77
+ function Flow(flg,i){
78
+
79
+ if(flg){
80
+
81
+ var timerId=setTimeout(function(){
82
+
83
+ flow_area[i].style.transition = "opacity 2.5s ease-in";
84
+
85
+ flow_area[i].style.opacity = "1";
86
+
87
+ flow_area[i].style.transform = "scale(1)";
88
+
89
+
90
+
91
+
92
+
93
+ if((slide_count_list[0] == true && i==2)){
94
+
95
+ flow_area[i].style.left = "-270px";
96
+
97
+ tri_top[i].style.left = "255px";
98
+
99
+ tri_under[i].style.left = "256px";
100
+
101
+ tri_top[i].style.transform = "rotateZ(90deg)";
102
+
103
+ tri_under[i].style.transform = "rotateZ(90deg)";
104
+
105
+ }
106
+
107
+
108
+
109
+ if((slide_count_list[0] == true && i==3)){
110
+
111
+ tri_top[i].style.left = "255px";
112
+
113
+ tri_under[i].style.left = "256px";
114
+
115
+ tri_top[i].style.transform = "rotateZ(90deg)";
116
+
117
+ tri_under[i].style.transform = "rotateZ(90deg)";
118
+
119
+ flow_area[i].style.left = "-270px";
120
+
121
+ }
122
+
123
+
124
+
125
+ if((slide_count_list[0] == true && i==4)){
126
+
127
+ tri_top[i].style.left = "255px";
128
+
129
+ tri_under[i].style.left = "256px";
130
+
131
+ tri_top[i].style.transform = "rotateZ(90deg)";
132
+
133
+ tri_under[i].style.transform = "rotateZ(90deg)";
134
+
135
+ flow_area[i].style.left = "-270px";
136
+
137
+
138
+
139
+ }
140
+
141
+
142
+
143
+ if((slide_count_list[0] == true && i==5)){
144
+
145
+ flow_area[i].style.left = "190px";
146
+
147
+
148
+
149
+ }
150
+
151
+
152
+
153
+
154
+
155
+
156
+
157
+ },3000);
158
+
159
+
160
+
161
+ }else{
162
+
163
+ clearTimeout(timerId);
164
+
165
+ }
166
+
167
+ }
168
+
169
+
170
+
171
+ // マウスアウトしたときタイトル詳細を消す処理
172
+
173
+ for(let i=0;i<p_area.length;i++){
174
+
175
+ (function(i){
176
+
177
+ p_area[i].addEventListener("mouseout",function(){
178
+
179
+ flow_area[i].style.opacity = "0";
180
+
181
+ flow_area[i].style.transform = "scale(0)";
182
+
183
+ flow_area[i].style.transition = "opacity 0s ease-in";
184
+
185
+
186
+
187
+
188
+
189
+ },false);
190
+
191
+ Flow(false,i);
192
+
193
+
194
+
195
+
196
+
197
+ })(i);
198
+
199
+ }
200
+
201
+ // あらすじの展開
202
+
203
+ for(let i=0;i<ara_area.length;i++){
204
+
205
+ (function(){
206
+
207
+ more_ara[i].addEventListener("click",function(){
208
+
209
+ if(more_count == true){
210
+
211
+ ara_area[i].style.height = "auto";
212
+
213
+ more_ara[i].innerHTML = "閉じる";
214
+
215
+ more_count = false;
216
+
217
+
218
+
219
+ }else if(more_count == false){
220
+
221
+ ara_area[i].style.height = "130px";
222
+
223
+ more_ara[i].innerHTML = "もっと見る";
224
+
225
+ more_count = true;
226
+
227
+
228
+
229
+ }
230
+
231
+ },false);
232
+
233
+
234
+
235
+ })(i);
236
+
237
+ }
238
+
239
+
240
+
241
+
242
+
243
+ ```