質問編集履歴

2

文法修正

2018/07/17 05:20

投稿

signon
signon

スコア12

test CHANGED
File without changes
test CHANGED
@@ -16,121 +16,103 @@
16
16
 
17
17
  ```html
18
18
 
19
- <table class="sPhone">
19
+ <table>
20
-
20
+
21
- <tbody>
21
+ <tbody>
22
-
22
+
23
- <tr>
23
+ <tr>
24
-
25
- <th>
24
+
26
-
27
- <h3>項目名</h3>
25
+ <th>項目名</th>
28
-
29
- </th>
26
+
30
-
31
- <td>
27
+ <td>
32
-
33
- <h3>
28
+
34
-
35
- <a href="#">
29
+ <a href="#">
36
-
30
+
37
- <img src="img/works/worksList_01_off.png" width="100%" class="base04">
31
+ <img src="img/works/worksList_01_off.png" width="100%" class="base01">
38
-
32
+
39
- <img src="img/works/worksList_01_on.png" width="100%" class="hide04">
33
+ <img src="img/works/worksList_01_on.png" width="100%" class="hide01">
40
-
34
+
41
- </a>
35
+ </a>
42
-
43
- </h3>
36
+
44
-
45
- </td>
37
+ </td>
46
-
38
+
47
- </tr>
39
+ </tr>
48
-
40
+
49
- </tbody>
41
+ </tbody>
50
42
 
51
43
  </table>
52
44
 
53
45
 
54
46
 
55
- <table class="sPhone">
47
+ <table>
56
-
48
+
57
- <tbody>
49
+ <tbody>
58
-
50
+
59
- <tr>
51
+ <tr>
60
-
61
- <th>
52
+
62
-
63
- <h3>項目名</h3>
53
+ <th>項目名</th>
64
-
65
- </th>
54
+
66
-
67
- <td>
55
+ <td>
68
-
69
- <h3>
56
+
70
-
71
- <a href="#">
57
+ <a href="#">
72
-
58
+
73
- <img src="img/works/worksList_02_off.png" width="100%" class="base05">
59
+ <img src="img/works/worksList_02_off.png" width="100%" class="base02">
74
-
60
+
75
- <img src="img/works/worksList_02_on.png" width="100%" class="hide05">
61
+ <img src="img/works/worksList_02_on.png" width="100%" class="hide02">
76
-
62
+
77
- </a>
63
+ </a>
78
-
79
- </h3>
64
+
80
-
81
- </td>
65
+ </td>
82
-
66
+
83
- </tr>
67
+ </tr>
84
-
68
+
85
- </tbody>
69
+ </tbody>
86
70
 
87
71
  </table>
88
72
 
89
73
 
90
74
 
91
- <table class="sPhone">
75
+ <table>
92
-
76
+
93
- <tbody>
77
+ <tbody>
94
-
78
+
95
- <tr>
79
+ <tr>
96
-
97
- <th>
80
+
98
-
99
- <h3>項目名</h3>
81
+ <th>項目名</th>
100
-
101
- </th>
82
+
102
-
103
- <td>
83
+ <td>
104
-
105
- <h3>
84
+
106
-
107
- <a href="#">
85
+ <a href="#">
108
-
86
+
109
- <img src="img/works/worksList_03_off.png" width="100%" class="base06">
87
+ <img src="img/works/worksList_03_off.png" width="100%" class="base03">
110
-
88
+
111
- <img src="img/works/worksList_03_on.png" width="100%" class="hide06">
89
+ <img src="img/works/worksList_03_on.png" width="100%" class="hide03">
112
-
90
+
113
- </a>
91
+ </a>
114
-
115
- </h3>
92
+
116
-
117
- </td>
93
+ </td>
118
-
94
+
119
- </tr>
95
+ </tr>
120
-
96
+
121
- </tbody>
97
+ </tbody>
122
98
 
123
99
  </table>
124
100
 
101
+
102
+
103
+ ```
104
+
125
- ```jQuery
105
+ ```jquery
106
+
107
+ //差替え1
126
108
 
127
109
  jQuery(function() {
128
110
 
129
- var listImg = jQuery('img.hide04');
111
+ var listImg = jQuery('img.hide01');
130
112
 
131
113
  listImg.hide();
132
114
 
133
- var base04 = jQuery('img.base04');
115
+ var base01 = jQuery('img.base01');
134
116
 
135
117
  //スマホ時にスクロールが100に達したら差替え
136
118
 
@@ -138,23 +120,23 @@
138
120
 
139
121
  var windowSm = 767;
140
122
 
141
- if (windowWidth <= windowSm) {
123
+ if (windowWidth <= windowSm) {
142
-
124
+
143
- jQuery(window).scroll(function () {
125
+ jQuery(window).scroll(function () {
144
-
126
+
145
- if (jQuery(this).scrollTop() > 100) {
127
+ if (jQuery(this).scrollTop() > 100) {
146
128
 
147
129
  //表示方法
148
130
 
149
- base04.fadeOut();
131
+ base01.fadeOut();
150
132
 
151
133
  listImg.fadeIn();
152
134
 
153
135
  } else {
154
136
 
155
- //表示方法
137
+ //表示
156
-
138
+
157
- base04.hide();
139
+ base01.hide();
158
140
 
159
141
  }
160
142
 
@@ -164,37 +146,39 @@
164
146
 
165
147
  });
166
148
 
149
+ //差替え2
150
+
167
151
  jQuery(function() {
168
152
 
169
- var listImg2 = jQuery('.hide05');
153
+ var listImg2 = jQuery('img.hide02');
170
154
 
171
155
  listImg2.hide();
172
156
 
173
- var base05 = jQuery('.base05');
157
+ var base02 = jQuery('img.base02');
174
-
158
+
175
- //スマホ時にスクロール200に達したら差替え
159
+ //スマホ時にスクロール200に達したら差替え
176
160
 
177
161
  var windowWidth = jQuery(window).width();
178
162
 
179
163
  var windowSm = 767;
180
164
 
181
- if (windowWidth <= windowSm) {
165
+ if (windowWidth <= windowSm) {
182
-
166
+
183
- jQuery(window).scroll(function () {
167
+ jQuery(window).scroll(function () {
184
-
168
+
185
- if (jQuery(this).scrollTop() > 200) {
169
+ if (jQuery(this).scrollTop() > 200) {
186
170
 
187
171
  //表示方法
188
172
 
189
- base05.fadeOut();
173
+ base02.fadeOut();
190
-
174
+
191
- listImg2.fadeIn();
175
+ listImg2.fadeIn();
192
-
176
+
193
- } else {
177
+ } else {
194
-
178
+
195
- //表示方法
179
+ //表示
196
-
180
+
197
- base05.hide();
181
+ base02.hide();
198
182
 
199
183
  }
200
184
 
@@ -204,37 +188,39 @@
204
188
 
205
189
  });
206
190
 
191
+ //差替え3
192
+
207
193
  jQuery(function() {
208
194
 
209
- var listImg3 = jQuery('.hide06');
195
+ var listImg3 = jQuery('img.hide03');
210
196
 
211
197
  listImg3.hide();
212
198
 
213
- var base06 = jQuery('.base06');
199
+ var base03 = jQuery('img.base03');
214
-
200
+
215
- //スマホ時にスクロール360に達したら表示
201
+ //スマホ時にスクロール300に達したら差替え
216
202
 
217
203
  var windowWidth = jQuery(window).width();
218
204
 
219
205
  var windowSm = 767;
220
206
 
221
- if (windowWidth <= windowSm) {
207
+ if (windowWidth <= windowSm) {
222
-
208
+
223
- jQuery(window).scroll(function () {
209
+ jQuery(window).scroll(function () {
224
-
210
+
225
- if (jQuery(this).scrollTop() > 360) {
211
+ if (jQuery(this).scrollTop() > 300) {
226
212
 
227
213
  //表示方法
228
214
 
215
+ base03.fadeOut();
216
+
229
217
  listImg3.fadeIn();
230
218
 
231
- base06.fadeOut();
232
-
233
- } else {
219
+ } else {
234
-
220
+
235
- //表示方法
221
+ //表示
236
-
222
+
237
- base06.hide();
223
+ base03.hide();
238
224
 
239
225
  }
240
226
 
@@ -244,6 +230,8 @@
244
230
 
245
231
  });
246
232
 
233
+ ```
234
+
247
235
 
248
236
 
249
237
 

1

不要なコード削除

2018/07/17 05:20

投稿

signon
signon

スコア12

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  jQuery(javascript)を使用して
2
2
 
3
- スマートフォン時に「スクロールして画像が見えたら別画像に差替える」が上手くいきません。
3
+ スマートフォン時に「スクロールして画像が見えたら順に別画像に差替える(全3画像)」が上手くいきません。
4
4
 
5
5
  現状:最初の画像が変わると、残りの画像も一気に差し替わります。(全3画像のみ)
6
6
 
@@ -68,7 +68,7 @@
68
68
 
69
69
  <h3>
70
70
 
71
- <a href="<?php echo esc_url( home_url('/') ); ?>worksAll">
71
+ <a href="#">
72
72
 
73
73
  <img src="img/works/worksList_02_off.png" width="100%" class="base05">
74
74