回答編集履歴

3

追記

2021/06/24 14:21

投稿

Jon_do
Jon_do

スコア1373

test CHANGED
@@ -79,3 +79,107 @@
79
79
  </html>
80
80
 
81
81
  ```
82
+
83
+
84
+
85
+ 複数
86
+
87
+
88
+
89
+ Javascript + html
90
+
91
+ ```
92
+
93
+ <!DOCTYPE html>
94
+
95
+ <html lang="ja">
96
+
97
+
98
+
99
+ <head>
100
+
101
+ <meta charset="UTF-8">
102
+
103
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
104
+
105
+ <title>Document</title>
106
+
107
+ </head>
108
+
109
+
110
+
111
+ <body>
112
+
113
+ <div class="shuffle-con">
114
+
115
+ <a href="#" class="shuffle-con-a">
116
+
117
+ <img src="https://placehold.jp/200x200.png" class="shuffle-img" alt="" />
118
+
119
+ <p class="text-shuffle">
120
+
121
+ シャッフルされるテキスト
122
+
123
+ </p>
124
+
125
+ </a>
126
+
127
+ </div>
128
+
129
+ <div class="shuffle-con">
130
+
131
+ <a href="#" class="shuffle-con-a">
132
+
133
+ <img src="https://placehold.jp/200x200.png" class="shuffle-img" alt="" />
134
+
135
+ <p class="text-shuffle">
136
+
137
+ シャッフルされるテキスト
138
+
139
+ </p>
140
+
141
+ </a>
142
+
143
+ </div>
144
+
145
+ <script src="shuffle-text.js"></script>
146
+
147
+ <script>
148
+
149
+ window.addEventListener('load', init);
150
+
151
+ function init() {
152
+
153
+ var effectList = [];
154
+
155
+ var elementList = document.querySelectorAll('.text-shuffle');
156
+
157
+ var hoverTarget = document.getElementsByClassName("shuffle-con-a");
158
+
159
+ for(let i=0;i< elementList.length;i++){
160
+
161
+ var element = elementList[i];
162
+
163
+ element.dataset.index = i;
164
+
165
+ effectList[i] = new ShuffleText(element);
166
+
167
+ hoverTarget[i].addEventListener('mouseenter', function () {
168
+
169
+ effectList[i].start();
170
+
171
+ });
172
+
173
+ }
174
+
175
+ }
176
+
177
+ </script>
178
+
179
+ </body>
180
+
181
+
182
+
183
+ </html>
184
+
185
+ ```

2

コード追記

2021/06/24 14:21

投稿

Jon_do
Jon_do

スコア1373

test CHANGED
@@ -1,31 +1,81 @@
1
- ```Javascript
1
+ Javascript + html
2
-
3
- window.addEventListener('load', init);
4
-
5
- function init() {
6
-
7
- var effectList = [];
8
-
9
- var elementList = document.querySelectorAll('.text-shuffle');
10
-
11
- var hoverTarget = document.getElementsByClassName("shuffle-con-a")[0];
12
-
13
- for (var i = 0; i < elementList.length; i++) {
14
-
15
- var element = elementList[i];
16
-
17
- element.dataset.index = i;
18
-
19
- effectList[i] = new ShuffleText(element);
20
-
21
- hoverTarget.addEventListener('mouseenter', function () {
22
-
23
- effectList[element.dataset.index].start();
24
-
25
- });
26
-
27
- }
28
-
29
- }
30
2
 
31
3
  ```
4
+
5
+ <!DOCTYPE html>
6
+
7
+ <html lang="ja">
8
+
9
+
10
+
11
+ <head>
12
+
13
+ <meta charset="UTF-8">
14
+
15
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
16
+
17
+ <title>Document</title>
18
+
19
+ </head>
20
+
21
+
22
+
23
+ <body>
24
+
25
+ <div class="shuffle-con">
26
+
27
+ <a href="#" class="shuffle-con-a">
28
+
29
+ <img src="https://placehold.jp/1280x720.png" class="shuffle-img" alt="" />
30
+
31
+ <div class="text-shuffle">
32
+
33
+ <p>シャッフルされるテキスト</p>
34
+
35
+ </div>
36
+
37
+ </a>
38
+
39
+ </div>
40
+
41
+ <script src="shuffle-text.js"></script>
42
+
43
+ <script>
44
+
45
+ window.addEventListener('load', init);
46
+
47
+ function init() {
48
+
49
+ var effectList = [];
50
+
51
+ var elementList = document.querySelectorAll('.text-shuffle');
52
+
53
+ var hoverTarget = document.getElementsByClassName("shuffle-con-a")[0];
54
+
55
+ for (var i = 0; i < elementList.length; i++) {
56
+
57
+ var element = elementList[i];
58
+
59
+ element.dataset.index = i;
60
+
61
+ effectList[i] = new ShuffleText(element);
62
+
63
+ hoverTarget.addEventListener('mouseenter', function () {
64
+
65
+ effectList[element.dataset.index].start();
66
+
67
+ });
68
+
69
+ }
70
+
71
+ }
72
+
73
+ </script>
74
+
75
+ </body>
76
+
77
+
78
+
79
+ </html>
80
+
81
+ ```

1

文法の修正

2021/06/24 07:22

投稿

Jon_do
Jon_do

スコア1373

test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
  hoverTarget.addEventListener('mouseenter', function () {
22
22
 
23
- effectList[+element.dataset.index].start();
23
+ effectList[element.dataset.index].start();
24
24
 
25
25
  });
26
26