質問編集履歴

3

コードを記載しました。

2018/06/12 02:08

投稿

takane
takane

スコア63

test CHANGED
File without changes
test CHANGED
@@ -41,3 +41,811 @@
41
41
 
42
42
 
43
43
  これで全部だったと思います。特に、jsはこのgimmick.jsにまとめてあります。
44
+
45
+
46
+
47
+ ```html
48
+
49
+ <div class="column ac_wrapper" id="newstop">
50
+
51
+ <h2 class="txt-tit">NEWS</h2>
52
+
53
+ <div class="col_news ac" id="ac">
54
+
55
+ <table class="news-ta ac_table">
56
+
57
+ <tbody>
58
+
59
+ <tr>
60
+
61
+ <th>2018.5.7</th>
62
+
63
+ <td style="line-height:1.3"><a href="topics.htm#massage_201805">樋口選手からメッセージが届きました。</a></td>
64
+
65
+ </tr>
66
+
67
+ <tr>
68
+
69
+ <th>2018.4.20</th>
70
+
71
+ <td style="line-height:1.3"><a href="topics.htm#baseball">メットライフドームでの始球式を終えられた樋口選手から写真が届きました。</a></td>
72
+
73
+ </tr>
74
+
75
+ <tr>
76
+
77
+ <th>2018.4.17</th>
78
+
79
+ <td style="line-height:1.3">4月20日(金)に行われる埼玉西武ライオンズ対千葉ロッテマリーンズ戦(メットライフドーム)の始球式に登場します。</td>
80
+
81
+ </tr>
82
+
83
+ <tr>
84
+
85
+ <th>2018.3.24</th>
86
+
87
+ <td style="line-height:1.3">世界フィギュアスケート選手権大会2018で2位となりました。</td>
88
+
89
+ </tr>
90
+
91
+ <tr>
92
+
93
+ <th>2018.2.24</th>
94
+
95
+ <td style="line-height:1.3">チャレンジカップ2018で優勝いたしました。</td>
96
+
97
+ </tr>
98
+
99
+ <tr>
100
+
101
+ <th>2017.12.23</th>
102
+
103
+ <td style="line-height:1.3">第86回全日本フィギュアスケート選手権大会で4位となりました。</td>
104
+
105
+ </tr>
106
+
107
+ <tr>
108
+
109
+ <th>2017.12.9</th>
110
+
111
+ <td style="line-height:1.3">ISUグランプリファイナル 国際フィギュアスケート競技大会 愛知・名古屋2017で6位となりました。</td>
112
+
113
+ </tr>
114
+
115
+ <tr>
116
+
117
+ <th>2017.11.4</th>
118
+
119
+ <td style="line-height:1.3">ISUグランプリ アウディカップオブチャイナで2位となりました。</td>
120
+
121
+ </tr>
122
+
123
+ <tr>
124
+
125
+ <th>2017.10.21</th>
126
+
127
+ <td style="line-height:1.3">ISUグランプリ ロステレコムカップで3位となりました。</td>
128
+
129
+ </tr>
130
+
131
+ <tr>
132
+
133
+ <th>2017.9.17</th>
134
+
135
+ <td style="line-height:1.3">ロンバルディアトロフィーで2位となりました。</td>
136
+
137
+ </tr>
138
+
139
+
140
+
141
+ </tbody>
142
+
143
+ </table>
144
+
145
+ <div class="switch_ac">
146
+
147
+ <div class="css_button parent" id="ac_open">
148
+
149
+ <p class="open">さらに表示する</p>
150
+
151
+ <p class="close">閉じる</p>
152
+
153
+ </div>
154
+
155
+ </div>
156
+
157
+
158
+
159
+ </div>
160
+
161
+
162
+
163
+ </div>
164
+
165
+
166
+
167
+ ```
168
+
169
+ ```js
170
+
171
+ (function () {
172
+
173
+ //関数の中身・・・
174
+
175
+
176
+
177
+ /*アコーディオンstart*/
178
+
179
+
180
+
181
+ const ac_table = document.getElementsByClassName('ac_table');
182
+
183
+
184
+
185
+ var acparent = document.getElementsByClassName('ac');
186
+
187
+ var button = document.getElementsByClassName('css_button');
188
+
189
+ var acopen = document.getElementsByClassName('open');
190
+
191
+ var acclose = document.getElementsByClassName('close');
192
+
193
+ var ac_wrapper = document.getElementsByClassName('ac_wrapper');
194
+
195
+
196
+
197
+ var sw = false;
198
+
199
+
200
+
201
+
202
+
203
+
204
+
205
+ for(var i=0;i<acparent.length;i++){
206
+
207
+ var chageClassOpen = acopen[i];
208
+
209
+ var chageClassClose = acclose[i];
210
+
211
+ var thisAcparent = acparent[i];
212
+
213
+ var thisTable = ac_table[i];
214
+
215
+ var bar = ac_table[i];
216
+
217
+ var thisButton = button[i];
218
+
219
+ var newstop = document.getElementById('newstop');
220
+
221
+ var thisAcWrapper = ac_wrapper[i];
222
+
223
+
224
+
225
+ //console.log( "テーブルの高さ" + thisTable.offsetHeight);
226
+
227
+
228
+
229
+ thisAcparent.classList.add('smooth');
230
+
231
+
232
+
233
+ thisButton.addEventListener("click", function(){
234
+
235
+ if(sw==true){
236
+
237
+ sw = false;
238
+
239
+ tableSize();
240
+
241
+ chageClassOpen.className = 'on open';
242
+
243
+ chageClassClose.className = 'off close';
244
+
245
+ thisAcparent.classList.remove('ac_opensesame');
246
+
247
+ move201806();
248
+
249
+ }else if(sw==false){
250
+
251
+ const contentHeight = bar.getBoundingClientRect().height;
252
+
253
+ thisAcparent.style.height = contentHeight+70+'px';
254
+
255
+ sw = true;
256
+
257
+ chageClassOpen.className = 'off open';
258
+
259
+ chageClassClose.className = 'on close';
260
+
261
+ thisAcparent.classList.add('ac_opensesame');
262
+
263
+ };
264
+
265
+
266
+
267
+ }, false);
268
+
269
+
270
+
271
+ /*スクロールした高さの取得*/
272
+
273
+ var windowTop = document.documentElement.scrollTop || document.body.scrollTop;
274
+
275
+ window.onload = function () {
276
+
277
+ window.onscroll = function(){
278
+
279
+ getTheScrollPosition( this );
280
+
281
+ };
282
+
283
+ function getTheScrollPosition( $event ) {
284
+
285
+ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
286
+
287
+ windowTop = scrollTop ;
288
+
289
+ //console.log(windowTop);
290
+
291
+ }
292
+
293
+ }
294
+
295
+ /*スクロールした高さの取得*/
296
+
297
+
298
+
299
+ /*ボックスまでのスクロール量*/
300
+
301
+ var box = thisAcWrapper.offsetTop;
302
+
303
+ //console.log("ボックスのページ上の位置は"+box);
304
+
305
+ /*ボックスまでのスクロール量*/
306
+
307
+
308
+
309
+
310
+
311
+ function move201806(){
312
+
313
+
314
+
315
+ var i = 10;
316
+
317
+
318
+
319
+ var howMuchScroll = false;
320
+
321
+ if(windowTop-box > 0){
322
+
323
+ howMuchScroll = (windowTop-box)/10;
324
+
325
+ howMuchScroll += 0.5;
326
+
327
+ }else if(windowTop-box < 0){
328
+
329
+ howMuchScroll = 0;
330
+
331
+ }
332
+
333
+ //console.log(howMuchScroll);
334
+
335
+
336
+
337
+ var int = setInterval(function() {
338
+
339
+ window.scrollBy(0,-howMuchScroll);
340
+
341
+ i += 20;
342
+
343
+ if (i >= 200) clearInterval(int);
344
+
345
+ }, 20);
346
+
347
+ };
348
+
349
+
350
+
351
+ function tableSize(){
352
+
353
+ var tableHeight = thisTable.getElementsByTagName('tbody')[0].childNodes[1].clientHeight + thisTable.getElementsByTagName('tbody')[0].childNodes[3].clientHeight + thisTable.getElementsByTagName('tbody')[0].childNodes[5].clientHeight + 71;
354
+
355
+ thisAcparent.style.height = tableHeight + 'px';
356
+
357
+ };
358
+
359
+ function wholeTableSize(){
360
+
361
+ var openHeight = thisTable.clientHeight + 71;
362
+
363
+ //console.log("テーブルの高さと71を足すと"+openHeight);
364
+
365
+ thisAcparent.style.height = openHeight + 'px';
366
+
367
+ }
368
+
369
+
370
+
371
+ //window.onload= tableSize();
372
+
373
+ window.addEventListener('DOMContentLoaded', function() {
374
+
375
+ tableSize();
376
+
377
+ });
378
+
379
+
380
+
381
+
382
+
383
+ //リサイズした時にする動作
384
+
385
+ window.onresize = window_load;
386
+
387
+ function window_load() {
388
+
389
+ if (sw == false) {
390
+
391
+ tableSize();
392
+
393
+ //console.log(thisAcparent.style.height);
394
+
395
+ } else if (sw == true) {
396
+
397
+ wholeTableSize();
398
+
399
+ }
400
+
401
+ //ボックスの位置を取り直す
402
+
403
+ box = thisAcWrapper.offsetTop;
404
+
405
+ //console.log("ボックスのページ上の位置は"+box);
406
+
407
+ }//リサイズした時にする動作
408
+
409
+
410
+
411
+
412
+
413
+
414
+
415
+
416
+
417
+
418
+
419
+ };/*for end*/
420
+
421
+
422
+
423
+
424
+
425
+ /*アコーディオンend*/
426
+
427
+
428
+
429
+
430
+
431
+
432
+
433
+
434
+
435
+
436
+
437
+ }());
438
+
439
+ ```
440
+
441
+
442
+
443
+ ```css
444
+
445
+ @charset "utf-8";
446
+
447
+
448
+
449
+
450
+
451
+ #ac{
452
+
453
+ height:215px;
454
+
455
+ overflow:hidden;
456
+
457
+ position:relative;
458
+
459
+ }
460
+
461
+ .ac_opensesame{
462
+
463
+ height:auto;
464
+
465
+ overflow:hidden;
466
+
467
+ position:relative;
468
+
469
+ transition:3s all ease 0s;
470
+
471
+ }
472
+
473
+ .switch_ac{
474
+
475
+ position: absolute;
476
+
477
+ width: 100%;
478
+
479
+ bottom: 0;
480
+
481
+ height: 46px;
482
+
483
+ padding: 15px 0 0 0;
484
+
485
+ background-color: #FFFFFF;
486
+
487
+ }
488
+
489
+ .css_button:hover{
490
+
491
+ cursor:pointer;
492
+
493
+ opacity:0.7;
494
+
495
+ }
496
+
497
+ .switch_ac p{
498
+
499
+ color:#F44EAC;
500
+
501
+ font-size:0.8rem;
502
+
503
+ }
504
+
505
+ .css_button{
506
+
507
+ border:#f5509d 1px solid;
508
+
509
+ border-radius:30px;
510
+
511
+ width:180px;
512
+
513
+ margin-left:auto;
514
+
515
+ margin-right:auto;
516
+
517
+ height:44px;
518
+
519
+ }
520
+
521
+ .open{
522
+
523
+ margin-top:10px;
524
+
525
+ }
526
+
527
+
528
+
529
+ .open:after{
530
+
531
+ content: "";
532
+
533
+ position: absolute;
534
+
535
+ display:block;
536
+
537
+ bottom: 6px;
538
+
539
+ left:0;
540
+
541
+ right:0;
542
+
543
+ margin:auto;
544
+
545
+ width:0px;
546
+
547
+ height:0px;
548
+
549
+ border-top: 10px #f5509d solid;
550
+
551
+ border-left: 7px solid transparent;
552
+
553
+ border-right: 7px solid transparent;
554
+
555
+ }
556
+
557
+
558
+
559
+ .close{
560
+
561
+ margin-top:10px;
562
+
563
+ display:none;
564
+
565
+ }
566
+
567
+
568
+
569
+ .close:after{
570
+
571
+ content: "";
572
+
573
+ position: absolute;
574
+
575
+ display:block;
576
+
577
+ bottom: 6px;
578
+
579
+ left:0;
580
+
581
+ right:0;
582
+
583
+ margin:auto;
584
+
585
+ width:0px;
586
+
587
+ height:0px;
588
+
589
+ border-bottom: 10px #f5509d solid;
590
+
591
+ border-left: 7px solid transparent;
592
+
593
+ border-right: 7px solid transparent;
594
+
595
+ }
596
+
597
+
598
+
599
+
600
+
601
+ .close a:link{
602
+
603
+ text-decoration: none;
604
+
605
+ color: #f5509d;
606
+
607
+ }
608
+
609
+ .close a:visited{
610
+
611
+ text-decoration: none;
612
+
613
+ color: #f5509d;
614
+
615
+ }
616
+
617
+ .close a::active{
618
+
619
+ text-decoration: none;
620
+
621
+ color: #f5509d;
622
+
623
+ }
624
+
625
+
626
+
627
+ .close a{
628
+
629
+ display:block;
630
+
631
+ width:182px;
632
+
633
+ height:46px;
634
+
635
+ }
636
+
637
+
638
+
639
+ .subtit_01{
640
+
641
+ height:50px;
642
+
643
+ text-align:center;
644
+
645
+ }
646
+
647
+
648
+
649
+ .hr_subtit{
650
+
651
+ border:0;
652
+
653
+ border-bottom:medium double #999;
654
+
655
+ display:block;
656
+
657
+ }
658
+
659
+
660
+
661
+ .pro{
662
+
663
+ position:absolute;
664
+
665
+ bottom:10px;
666
+
667
+ right:7px;
668
+
669
+ }
670
+
671
+
672
+
673
+
674
+
675
+ .button_result{
676
+
677
+ text-align:right;
678
+
679
+ margin-top:0;
680
+
681
+ }
682
+
683
+ .result table.res-ta{
684
+
685
+ margin-bottom:15px;
686
+
687
+ }
688
+
689
+ .css_button p{
690
+
691
+ line-height:0.8rem;
692
+
693
+ font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
694
+
695
+ font-size:0.8rem;
696
+
697
+ margin-left:auto;
698
+
699
+ margin-right:auto;
700
+
701
+ text-align:center;
702
+
703
+ width: 182px;
704
+
705
+ height: 46px;
706
+
707
+ margin-top: 0;
708
+
709
+ padding-top: 0;
710
+
711
+ line-height: 30px;
712
+
713
+ }
714
+
715
+
716
+
717
+ .column .plans{
718
+
719
+ margin-top:0px;
720
+
721
+ }
722
+
723
+
724
+
725
+ .top-cont1 .top-cont-L h2,.top-cont1 .top-cont-R h2{
726
+
727
+ margin-top:0;
728
+
729
+ }
730
+
731
+
732
+
733
+ .top-cont1 .top-cont-L .btn-05{
734
+
735
+ text-align:right;
736
+
737
+ }
738
+
739
+
740
+
741
+ @media only screen and (max-width: 767px) {
742
+
743
+ #ac {
744
+
745
+ height: inherit;
746
+
747
+ overflow: hidden;
748
+
749
+ position: relative;
750
+
751
+ }
752
+
753
+ .css_button:hover{
754
+
755
+ cursor:pointer;
756
+
757
+ opacity:1.0;
758
+
759
+ }
760
+
761
+ .column {
762
+
763
+ margin-top: 35px;
764
+
765
+ }
766
+
767
+ .pro {
768
+
769
+ position:relative;
770
+
771
+ padding-top: 0;
772
+
773
+ margin-top: 10px;
774
+
775
+ margin-right: 10px;
776
+
777
+ bottom:inherit;
778
+
779
+ right:inherit;
780
+
781
+ }
782
+
783
+ .top-cont1 .top-cont-R .pro{
784
+
785
+ margin-right:0;
786
+
787
+ }
788
+
789
+ .mg{
790
+
791
+ margin-top:20px;
792
+
793
+ width:86%;
794
+
795
+ margin-left:auto;
796
+
797
+ margin-right:auto;
798
+
799
+ }
800
+
801
+ .top-cont-R .p-th-bg{
802
+
803
+ padding:7%;
804
+
805
+ width:86%
806
+
807
+ }
808
+
809
+
810
+
811
+ .top-cont-R .p-th-bg .mt10.parent{
812
+
813
+ padding:10px 4% 10px 4%!important;
814
+
815
+ box-sizing:border-box;
816
+
817
+ }
818
+
819
+
820
+
821
+ .button_result a{
822
+
823
+ margin-right:5px;
824
+
825
+ }
826
+
827
+
828
+
829
+ .top-cont2.column{
830
+
831
+ padding-bottom:0;
832
+
833
+ }
834
+
835
+
836
+
837
+ .top-cont-R{
838
+
839
+ margin-top:35px;
840
+
841
+ }
842
+
843
+ .top-cont1.column{
844
+
845
+ margin-top:30px;
846
+
847
+ }
848
+
849
+ }
850
+
851
+ ```

2

htmlを忘れていました。

2018/06/12 02:08

投稿

takane
takane

スコア63

test CHANGED
File without changes
test CHANGED
@@ -22,6 +22,10 @@
22
22
 
23
23
 
24
24
 
25
+ html
26
+
27
+ view-source:http://www.noevir.co.jp/figureskate/
28
+
25
29
  js
26
30
 
27
31
  http://www.noevir.co.jp/figureskate/js/gimmick.js

1

js、cssのURLを追記した点

2018/06/12 01:37

投稿

takane
takane

スコア63

test CHANGED
File without changes
test CHANGED
@@ -19,3 +19,21 @@
19
19
 
20
20
 
21
21
  window.onloadでは遅いかと思ったのでaddEventListenerのDOMContentLoadedも試したのですがうまくいきませんでした。
22
+
23
+
24
+
25
+ js
26
+
27
+ http://www.noevir.co.jp/figureskate/js/gimmick.js
28
+
29
+ css
30
+
31
+ http://www.noevir.co.jp/figureskate/css/top_201806.css
32
+
33
+ 調整用css
34
+
35
+ http://www.noevir.co.jp/figureskate/css/top.css
36
+
37
+
38
+
39
+ これで全部だったと思います。特に、jsはこのgimmick.jsにまとめてあります。