質問編集履歴
6
追加の質問
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -7,8 +7,15 @@
|
|
|
7
7
|
|
|
8
8
|
**希望 >>>** 各コマ数が書かれた[プルダウン]と[実行]ボタンを配置の上，0コマ目(初期状態)の状態からプルダウンで4コマ目へ移動という項目を選択，実行ボタンで1,2,3コマ目とアニメーションで通過しながら(通過時間1回1秒×4コマ=4秒間かけて)移動という方式にしたい。また再び別の番号の項目選択でそのコマ数まで移動
|
|
9
9
|
|
|
10
|
+
**追加** 回答をいただいた各アニメーション終了後に以下の拡大縮小アニメーションを追加するにはどうすればよいでしょうか。後片付けで大変申し訳ございません
|
|
11
|
+
```@keyframes anime1 {
|
|
12
|
+
from {
|
|
13
|
+
transform: scale(0.9,0.9);
|
|
14
|
+
}
|
|
15
|
+
to {
|
|
16
|
+
transform: scale(1,1);
|
|
17
|
+
```
|
|
10
18
|
|
|
11
|
-
|
|
12
19
|
### html
|
|
13
20
|
```
|
|
14
21
|
<div class="parent">
|
5
書式の改善とコードの転記ミスを修正。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,88 +3,110 @@
|
|
|
3
3
|
以下は矢印ワンクリックで数字の書かれた1コマ(400*400px)ずつがスライドするのですが，これをセレクトボックスと実行ボタンで選択した番号コマまで自動で移動する方法をご教示ください。
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
現状 >>>
|
|
6
|
+
**現状 >>> **0コマ目(初期状態)から4コマ目の移動には，1,2,3コマ目と途中4回(1回1秒×4回=4秒かけて移動)[送り]ボタンクリックする方式。
|
|
7
7
|
|
|
8
|
-
希望 >>>
|
|
8
|
+
**希望 >>>** 各コマ数が書かれた[プルダウン]と[実行]ボタンを配置の上，0コマ目(初期状態)の状態からプルダウンで4コマ目へ移動という項目を選択，実行ボタンで1,2,3コマ目とアニメーションで通過しながら(通過時間1回1秒×4コマ=4秒間かけて)移動という方式にしたい。また再び別の番号の項目選択でそのコマ数まで移動
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
・・・・・・・・・・・・・・以下コード・・・・・・・・・・・・・・
|
|
12
11
|
|
|
12
|
+
### html
|
|
13
|
+
```
|
|
13
14
|
<div class="parent">
|
|
14
|
-
|
|
15
|
+
<span class="child" id="box">
|
|
15
|
-
<div style=" width:400px;height:400px; background-color: #999;">0
|
|
16
|
+
<div style=" width:400px;height:400px; background-color: #999;">0</div>
|
|
16
|
-
<div style=" width:400px;height:400px; background-color: #555;">1
|
|
17
|
+
<div style=" width:400px;height:400px; background-color: #555;">1</div>
|
|
17
|
-
<div style=" width:400px;height:400px; background-color: #999;">2
|
|
18
|
+
<div style=" width:400px;height:400px; background-color: #999;">2</div>
|
|
18
|
-
<div style=" width:400px;height:400px; background-color: #555;">3
|
|
19
|
+
<div style=" width:400px;height:400px; background-color: #555;">3</div>
|
|
19
|
-
<div style=" width:400px;height:400px; background-color: #999;">4
|
|
20
|
+
<div style=" width:400px;height:400px; background-color: #999;">4</div>
|
|
20
|
-
<div style=" width:400px;height:400px; background-color: #555;">5
|
|
21
|
+
<div style=" width:400px;height:400px; background-color: #555;">5</div>
|
|
21
|
-
<div style=" width:400px;height:400px; background-color: #999;">6
|
|
22
|
+
<div style=" width:400px;height:400px; background-color: #999;">6</div>
|
|
22
|
-
<div style=" width:400px;height:400px; background-color: red;">7
|
|
23
|
+
<div style=" width:400px;height:400px; background-color: red;">7</div>
|
|
23
24
|
</span>
|
|
24
25
|
</div>
|
|
25
|
-
<span style="position: relative; font-size: 20px;">
|
|
26
|
-
<input type="button" onclick="move(1);" value=" ↑ " id="btn"/>
|
|
27
|
-
<input type="button" onclick="move(2);" value=" ↓ " id="btn"/>
|
|
28
|
-
</span>
|
|
29
26
|
|
|
30
|
-
////////////////////javascript//////////////////////
|
|
31
|
-
var x, y;
|
|
32
|
-
function move(direct) {
|
|
33
|
-
const objBox = document.getElementById("box");
|
|
34
|
-
const cssStyle = window.getComputedStyle(objBox);
|
|
35
|
-
y = parseInt(cssStyle.top.match(/(.*)px/)[1]);
|
|
36
|
-
let anim = '';
|
|
37
|
-
switch (direct) {
|
|
38
|
-
case 1: if (y >= -2400) { anim = 'moveDown'; } break;
|
|
39
|
-
case 2: if (y <= -400) { anim = 'moveUp'; } break;
|
|
40
|
-
}
|
|
41
|
-
if (anim !== '') {
|
|
42
|
-
objBox.style.animationName = anim; // アニメ開始
|
|
43
|
-
btnsDisabled(true); // ボタン無効化
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
// animation 終了時の処理
|
|
47
|
-
document.addEventListener('animationend', () => {
|
|
48
|
-
const objBox = document.getElementById("box");
|
|
49
|
-
const cssStyle = window.getComputedStyle(objBox);
|
|
50
|
-
const arr = cssStyle.transform.match(/((.*))/)[1].split(","); // 文字列 matrix(a, b, c, d, cx, cy) を分解
|
|
51
|
-
objBox.style.transform = ''; // アニメした transform を消す
|
|
52
|
-
objBox.style.top = y + 'px';
|
|
53
|
-
objBox.style.animationName = ''; // animationName を消す。こうしないと、次回に同じ方向のアニメが効かない。
|
|
54
|
-
btnsDisabled(false); // ボタン有効化
|
|
55
|
-
});
|
|
56
|
-
// 矢印ボタンの有効化/無効化
|
|
57
|
-
function btnsDisabled(arg) {
|
|
58
|
-
let btns = document.getElementsByTagName("input");
|
|
59
|
-
for (let i = 0; i < btns.length; i++) {
|
|
60
|
-
btns[i].disabled = arg;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
27
|
|
|
28
|
+
<input type="button" onclick="move(1);" value=" 送り " id="btn"/>
|
|
64
|
-
/
|
|
29
|
+
<input type="button" onclick="move(2);" value=" 戻し " id="btn"/>
|
|
30
|
+
```
|
|
31
|
+
### CSS
|
|
32
|
+
```
|
|
65
33
|
div.parent {
|
|
66
|
-
position: relative;
|
|
34
|
+
position: relative;
|
|
67
|
-
width: 400px;
|
|
35
|
+
width: 400px;
|
|
68
36
|
height: 400px;
|
|
37
|
+
|
|
69
|
-
border: 1px solid #ddd;
|
|
38
|
+
border: 1px solid #ddd;
|
|
70
|
-
overflow: hidden;
|
|
39
|
+
overflow: hidden;
|
|
71
40
|
}
|
|
72
41
|
span.child {
|
|
73
42
|
position: absolute;
|
|
74
43
|
width : 400px;
|
|
75
44
|
height: 3200px;
|
|
76
45
|
left: 0px;
|
|
77
|
-
|
|
46
|
+
top:0px;
|
|
78
47
|
animation-duration: 1s;
|
|
79
48
|
animation-iteration-count: 1;
|
|
80
49
|
animation-timing-function: linear;
|
|
81
50
|
animation-fill-mode: forwards;
|
|
82
51
|
}
|
|
52
|
+
|
|
83
53
|
@keyframes moveDown {
|
|
54
|
+
|
|
55
|
+
100% {
|
|
84
|
-
|
|
56
|
+
transform:translateY(-400px);
|
|
57
|
+
}
|
|
85
58
|
}
|
|
86
59
|
@keyframes moveUp {
|
|
60
|
+
|
|
61
|
+
100% {
|
|
87
|
-
|
|
62
|
+
transform:translateY(400px);
|
|
63
|
+
}
|
|
88
64
|
}
|
|
89
65
|
|
|
66
|
+
```
|
|
67
|
+
### JS
|
|
68
|
+
```
|
|
69
|
+
var x, y; // box の座標
|
|
70
|
+
|
|
71
|
+
// 移動 1=上, 2=下
|
|
72
|
+
function move(direct) {
|
|
73
|
+
|
|
74
|
+
const objBox = document.getElementById("box");
|
|
75
|
+
const cssStyle = window.getComputedStyle(objBox);
|
|
76
|
+
y = parseInt(cssStyle.top.match(/(.*)px/)[1]);
|
|
77
|
+
|
|
78
|
+
let anim = '';
|
|
79
|
+
switch (direct) {
|
|
80
|
+
case 1: if (y >= -2400) { anim = 'moveDown'; } break;
|
|
81
|
+
case 2: if (y <= -400) { anim = 'moveUp'; } break;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
if (anim !== '') {
|
|
85
|
+
objBox.style.animationName = anim; // アニメ開始
|
|
86
|
+
btnsDisabled(true); // ボタン無効化
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
// animation 終了時の処理
|
|
90
|
+
document.addEventListener('animationend', () => {
|
|
91
|
+
const objBox = document.getElementById("box");
|
|
92
|
+
const cssStyle = window.getComputedStyle(objBox);
|
|
93
|
+
const arr = cssStyle.transform.match(/((.*))/)[1].split(","); // 文字列 matrix(a, b, c, d, cx, cy) を分解
|
|
94
|
+
y += parseInt(arr[5]); // transform.y の値を加える
|
|
95
|
+
|
|
96
|
+
objBox.style.transform = ''; // アニメした transform を消す
|
|
97
|
+
objBox.style.top = y + 'px';
|
|
98
|
+
objBox.style.animationName = ''; // animationName を消す。こうしないと、次回に同じ方向のアニメが効かない。
|
|
99
|
+
|
|
100
|
+
btnsDisabled(false); // ボタン有効化
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
// 矢印ボタンの有効化/無効化
|
|
104
|
+
function btnsDisabled(arg) {
|
|
105
|
+
let btns = document.getElementsByTagName("input");
|
|
106
|
+
for (let i = 0; i < btns.length; i++) {
|
|
107
|
+
btns[i].disabled = arg;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
```
|
|
90
112
|
お手数をおかけしますが何卒よろしくお願い申し上げます。
|
4
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|
3
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
</span>
|
|
29
29
|
|
|
30
30
|
////////////////////javascript//////////////////////
|
|
31
|
+
var x, y;
|
|
31
32
|
function move(direct) {
|
|
32
33
|
const objBox = document.getElementById("box");
|
|
33
34
|
const cssStyle = window.getComputedStyle(objBox);
|
2
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
以下は矢印ワンクリックで数字の書かれた1コマ(400*400px)ずつがスライドするのですが，これをセレクトボックスと実行ボタンで選択した番号コマまで自動で移動する方法をご教示ください。
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
現状 >>> 3コマ目から7コマ目の移動には4回(1回1秒×4回=4秒かけて移動)ボタンクリック
|
|
6
|
+
現状 >>> 3コマ目から7コマ目の移動には4,5,6コマと途中4回(1回1秒×4回=4秒かけて移動)ボタンクリック
|
|
7
7
|
|
|
8
8
|
希望 >>> 3コマ目の状態から7コマ目をプルダウンで選択，実行で4,5,6コマを通過しながら(4秒間かけて)移動...再び別の番号まで移動
|
|
9
9
|
|
1
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
現状 >>> 3コマ目から7コマ目の移動には4回(1回1秒×4回=4秒かけて移動)ボタンクリック
|
|
7
7
|
|
|
8
|
-
希望 >>> 3コマ目の状態から7コマ目をプルダウンで選択，実行で(4秒間かけて)移動...再び別の番号まで移動
|
|
8
|
+
希望 >>> 3コマ目の状態から7コマ目をプルダウンで選択，実行で4,5,6コマを通過しながら(4秒間かけて)移動...再び別の番号まで移動
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
・・・・・・・・・・・・・・以下コード・・・・・・・・・・・・・・
|