回答編集履歴

3

tuiki

2025/04/23 08:14

投稿

yambejp
yambejp

スコア117667

test CHANGED
@@ -60,3 +60,48 @@
60
60
  </ul>
61
61
  </div>
62
62
  ```
63
+ # リファクタリング
64
+ 今回の挙動をエミュレートするとこんな感じがよいかと
65
+ ```html
66
+ <script>
67
+ const delay =1000;
68
+ window.addEventListener('DOMContentLoaded', ()=>{
69
+ document.querySelector('#ulArea').classList.add('anime');
70
+ });
71
+ document.addEventListener('animationend',e=>{
72
+ const t=e.target;
73
+ t.appendChild(t.querySelector('li'));
74
+ t.classList.remove('anime');
75
+ setTimeout(()=>t.classList.add('anime'), delay );
76
+ });
77
+ </script>
78
+ <style>
79
+ #ticKer{
80
+ background-Color:lightgray;
81
+ overflow:hidden;
82
+ position:relative;
83
+ height:40px;
84
+ }
85
+ #ulArea{
86
+ list-style:none;
87
+ position:absolute;
88
+ }
89
+ #ulArea.anime{
90
+ animation:slideup 1s;
91
+ }
92
+ #ulArea li{
93
+ height:40px;
94
+ }
95
+ @keyframes slideup{
96
+ from{top:0}
97
+ to{top:-40}
98
+ }
99
+ </style>
100
+ <div id="ticKer">
101
+ <ul id="ulArea">
102
+ <li>1</li>
103
+ <li>2</li>
104
+ <li>3</li>
105
+ </ul>
106
+ </div>
107
+ ```

2

調整

2025/04/23 07:58

投稿

yambejp
yambejp

スコア117667

test CHANGED
@@ -4,3 +4,59 @@
4
4
  仕組み自体がものすごく古いため引数に文字列でユーザー関数を指定することができます
5
5
  内容としてはmsecミリ秒後にinnScrollを実行引数がそれぞれtickerH,upSpeed,delayということ
6
6
  ただし何をやりたいのかは検証していません
7
+
8
+ # 参考
9
+ 挙動はこういうことでしょうね、1行メッセージを縦にスライドさせながらローテーションさせるということです
10
+ ```html
11
+
12
+ <script>
13
+ var upSpeed=15;
14
+ var delay =3000;
15
+ var tickerH=40;
16
+ window.onload =function divScroller(){
17
+ scroller = document.getElementById("ticKer");
18
+ scroller.style.height= tickerH+"px";
19
+ scroller.style.lineHeight= tickerH+"px";
20
+ slide = document.getElementById("ulArea");
21
+ slide.style.position = "absolute";
22
+ slide.style.top = tickerH+"px" ;
23
+ innScroll(tickerH, upSpeed, delay);
24
+ }
25
+ function innScroll(tickerH, upSpeed, delay){
26
+ msec = upSpeed;
27
+ numTop = parseInt(slide.style.top);
28
+ if (numTop > -tickerH){
29
+ slide.style.top = (numTop-1)+"px";
30
+ }
31
+ else{ slide.style.top = 0+"px";
32
+ cngLi();
33
+ }
34
+ if(numTop==0){msec = delay;
35
+ }
36
+ setTimeout("innScroll("+ tickerH +","+ upSpeed +"," + delay +")", msec);
37
+ }
38
+ function cngLi(){
39
+ base= document.getElementById("ulArea");
40
+ liList = base.getElementsByTagName("li");
41
+ elm = liList[0];
42
+ base.appendChild(elm);
43
+ }
44
+ </script>
45
+ <style>
46
+ #ticKer{
47
+ background-Color:lightgray;
48
+ overflow:hidden;
49
+ position:relative;
50
+ }
51
+ #ulArea{
52
+ list-style:none;
53
+ }
54
+ </style>
55
+ <div id="ticKer">
56
+ <ul id="ulArea">
57
+ <li>1</li>
58
+ <li>2</li>
59
+ <li>3</li>
60
+ </ul>
61
+ </div>
62
+ ```

1

調整

2025/04/23 05:50

投稿

yambejp
yambejp

スコア117667

test CHANGED
@@ -1,6 +1,6 @@
1
1
  > setTimeout("innScroll("+ tickerH +","+ upSpeed +"," + delay +")", msec)
2
2
 
3
- setTimeoutは遅延して実行する作業です
3
+ setTimeoutは遅延して実行する仕組みです
4
4
  仕組み自体がものすごく古いため引数に文字列でユーザー関数を指定することができます
5
5
  内容としてはmsecミリ秒後にinnScrollを実行引数がそれぞれtickerH,upSpeed,delayということ
6
6
  ただし何をやりたいのかは検証していません