質問を投稿
marqueeの方向指示ボタンの背景色に、animation styleを設定するには
下記のソースコードは、marqueeの方向指示ボタンの背景色に、animation styleを設定しようと
試みたものですが、うまくいきません。文字が左に移動しているときは左の方向指示ボタンの背景色に,
文字が右に移動しているときは右の方向指示ボタンの背景色に、"点滅"のanimation styleを設定したいのです。
どのように書き換えれば、よろしいでしょうか。ご教示ください。
<STYLE type="text/css">
#blinkL { background:pink;
-webkit-animation:blinkL 2s ease-in-out infinite alternate;
-moz-animation:blinkL 2s ease-in-out infinite alternate;
animation:blinkL 2s ease-in-out infinite alternate;
}
@-webkit-keyframes blinkL{
0% {opacity:0;}
100% {opacity:1; }
}
@-moz-keyframes blinkL{
0% {opacity:0;}
100% {opacity:1;}
}
@keyframes blinkL{
0% {opacity:0;}
100% {opacity:1;}
}
#blinkR{ background:pink;
-webkit-animation:blinkR 2s ease-in-out infinite alternate;
-moz-animation:blinkR 2s ease-in-out infinite alternate;
animation:blinkR 2s ease-in-out infinite alternate;
}
@-webkit-keyframes blinkR{
0% {opacity:0;}
100% {opacity:1; }
}
@-moz-keyframes blinkR{
0% {opacity:0;}
100% {opacity:1;}
}
@keyframes blinkR{
0% {opacity:0;}
100% {opacity:1;}
}
</STYLE>
<SCRIPT type="text/javascript">
<!--
flg=false;
function Stop_Start(){
flg = !flg;
document.myForm.stopStart.value=flg?"START":"STOP";
if(flg) {
document.getElementById("myMarquee").stop();
} else {
document.getElementById("myMarquee").start();
}
}
function directL(){
document.getElementById("blinkL").style.animation="";
document.getElementById("blinkR").style.animation=0;
}
function directR(){
document.getElementById("blinkL").style.animation=0;
document.getElementById("blinkR").style.animation="";
}
//-->
</script>
<marquee id="myMarquee">ttttt</marquee>
<form name="myForm" style="text-align:center;">
<INPUT id="blinkL" type="button" onclick="myMarquee.direction='left'; directL();" value="←">
<input type="button" name="stopStart" value=" STOP " onClick="Stop_Start()">
<INPUT id="blinkR" type="button" style="animation:0;" onclick="myMarquee.direction='right'; directR();" value="→">
</form>
下記のソースコードは、marqueeの方向指示ボタンの背景色に、animation styleを設定しようと 試みたものですが、うまくいきません。文字が左に移動しているときは左の方向指示ボタンの背景色に, 文字が右に移動しているときは右の方向指示ボタンの背景色に、"点滅"のanimation styleを設定したいのです。 どのように書き換えれば、よろしいでしょうか。ご教示ください。 ```ここに言語を入力 <STYLE type="text/css"> #blinkL { background:pink; -webkit-animation:blinkL 2s ease-in-out infinite alternate; -moz-animation:blinkL 2s ease-in-out infinite alternate; animation:blinkL 2s ease-in-out infinite alternate; } @-webkit-keyframes blinkL{ 0% {opacity:0;} 100% {opacity:1; } } @-moz-keyframes blinkL{ 0% {opacity:0;} 100% {opacity:1;} } @keyframes blinkL{ 0% {opacity:0;} 100% {opacity:1;} } #blinkR{ background:pink; -webkit-animation:blinkR 2s ease-in-out infinite alternate; -moz-animation:blinkR 2s ease-in-out infinite alternate; animation:blinkR 2s ease-in-out infinite alternate; } @-webkit-keyframes blinkR{ 0% {opacity:0;} 100% {opacity:1; } } @-moz-keyframes blinkR{ 0% {opacity:0;} 100% {opacity:1;} } @keyframes blinkR{ 0% {opacity:0;} 100% {opacity:1;} } </STYLE> <SCRIPT type="text/javascript"> <!-- flg=false; function Stop_Start(){ flg = !flg; document.myForm.stopStart.value=flg?"START":"STOP"; if(flg) { document.getElementById("myMarquee").stop(); } else { document.getElementById("myMarquee").start(); } } function directL(){ document.getElementById("blinkL").style.animation=""; document.getElementById("blinkR").style.animation=0; } function directR(){ document.getElementById("blinkL").style.animation=0; document.getElementById("blinkR").style.animation=""; } //--> </script> <marquee id="myMarquee">ttttt</marquee> <form name="myForm" style="text-align:center;"> <INPUT id="blinkL" type="button" onclick="myMarquee.direction='left'; directL();" value="←"> <input type="button" name="stopStart" value=" STOP " onClick="Stop_Start()"> <INPUT id="blinkR" type="button" style="animation:0;" onclick="myMarquee.direction='right'; directR();" value="→"> </form> ```