QA@IT

marqueeの方向指示ボタンの背景色に、animation styleを設定するには

2697 PV

下記のソースコードは、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>

回答

"stop"と"start"を切り替える『トグルボタン』でも、うまく行きました。
なお、スタートさせるには、『方向指示ボタン』で方向を決めて点滅させてから
『START』を押さないと、機能しません。

<html>
 <head>
   <title>ボタンのラベルを点滅させます</title>

 <script language="JavaScript">
 <!--

   msgA = new Array();
   msgA[0] = "←";
   msgA[1] = "\u0020\u0020\u0020";
   numA = 0;
 var tmr1ID;

     function blinkmsg1(){ //ボタンのラベル(文字)を点滅させます。
           document.getElementById("stop_start").disabled=false;
           document.getElementById("mybotan1").disabled=true;
           document.getElementById("mybotan2").disabled=false;
           document.getElementById("mybotan2").value ="→";
           clearTimeout(tmr2ID);
           document.getElementById("mybotan1").value = msgA[numA];
           numA ^= 1;
           tmr1ID = setTimeout('blinkmsg1()',1000);
           document.getElementById("mybotan1").style.color="red";
           document.getElementById("mybotan2").style.color="white";
           myMarquee.direction='left';
}
   msgB = new Array();
   msgB[0] = "→";
   msgB[1] = "\u0020\u0020\u0020";
   numB = 0;
 var tmr2ID;

     function blinkmsg2(){ //ボタンのラベル(文字)を点滅させます。
           document.getElementById("stop_start").disabled=false;
           document.getElementById("mybotan1").disabled=false;
           document.getElementById("mybotan2").disabled=true;
           document.getElementById("mybotan1").value ="←";
           clearTimeout(tmr1ID);
           document.getElementById("mybotan2").value = msgB[numB];
           numB ^= 1;
           tmr2ID = setTimeout('blinkmsg2()',1000);
           document.getElementById("mybotan1").style.color="white";
           document.getElementById("mybotan2").style.color="red";
           myMarquee.direction='right';
}

 flg=false;
    function stopMarquee(){
      flg = !flg;
         if(flg){
                 document.getElementById("mybotan1").value ="←";
                 clearTimeout(tmr1ID);
                 document.getElementById("mybotan1").style.color="white";
                 document.getElementById("mybotan2").value ="→";
                 clearTimeout(tmr2ID);
                 document.getElementById("mybotan2").style.color="white";
                 document.getElementById("mybotan1").disabled=false;
                 document.getElementById("mybotan2").disabled=false;
                 document.getElementById("stop_start").disabled=true;
                 document.getElementById("myMarquee").stop();
                 flg=true;
           }else{
                 document.getElementById("stop_start").disabled=false;
                 document.getElementById("myMarquee").start();
                 flg=false;
         }
       document.getElementById("stop_start").value=flg?"START":"STOP";
     }
 //-->
 </script>
 </head>

 <body>
   <marquee id="myMarquee">ttttt</marquee>
<br><br>
   <form name="myForm" style="text-align:center;">
    <input name="blinkA" type="button" id="mybotan1" value="←" onclick="blinkmsg1();"
       style="color:white; font-weight:bold; background:black; text-align : center;">
    <input type="button" id="stop_start" name="" value=" STOP " onClick="stopMarquee()">
    <input name="blinkB"  type="button" id="mybotan2" value="→" onclick="blinkmsg2();"
       style="color:white; font-weight:bold; background:black; text-align : center;">
   </form>

 <script language="JavaScript">
 <!--
  setTimeout('blinkmsg1()',1000);
 //-->
 </script>

   </body>
 </html>

animationスタイルでもできるそうです。
下記のソースコードで、上記と同じようになります。

<style>
.DIRECTION {
  color: white;
  background: black;
}

.BLINK {
  animation: blink 1s step-end infinite normal;
}
@keyframes blink {
  0% { color: red; }
  50% { color: transparent; }
}
</style>

<script>
function marLeft() {
  document.getElementById("stopStart").disabled=false;
  document.getElementById("blinkL").classList.add("BLINK");
  document.getElementById("blinkR").classList.remove("BLINK");
}

function marRight() {
  document.getElementById("stopStart").disabled=false;
  document.getElementById("blinkR").classList.add("BLINK");
  document.getElementById("blinkL").classList.remove("BLINK");
}

 flg=false;
    function Stop_Start(){
      flg = !flg;
         if(flg){
                 document.getElementById("blinkL").classList.remove("BLINK");
                 document.getElementById("blinkR").classList.remove("BLINK");
                 document.getElementById("stopStart").disabled=true;
                 document.getElementById("myMarquee").stop();
                 flg=true;             
           }else{
                 document.getElementById("stopStart").disabled=false;
                 document.getElementById("myMarquee").start();
                 flg=false;           
         }
       document.getElementById("stopStart").value=flg?"START":"STOP";
     }
</script>

<marquee id="myMarquee">TTTTT</marquee>
<br><br>
<form id="marFunction" name="myForm" style="text-align:center;">
  <input id="blinkL" type="button" class="DIRECTION BLINK" onclick="myMarquee.direction='left'; marLeft();" value="←"> 
       ☆
  <input id="stopStart" type="button" name="stopStart" value=" STOP " onClick="Stop_Start()">
       ☆
  <input id="blinkR" type="button" class="DIRECTION" onclick="myMarquee.direction='right'; marRight();" value="→"> 
</form>

編集 履歴 (1)

animationスタイルはできませんでしたが、JAVASCRIPTを使って方向を指示する矢印を
"点滅"させることは、以下のソースコードの通りにできました。
*"stop"と"start"を切り替える『トグルボタン』ではうまく行きませんでしたので、
普通の『STOPボタン』にしました。

<html>
 <head>
   <title>ボタンのラベルを点滅させます</title>

 <script language="JavaScript">
 <!--

   msgA = new Array();
   msgA[0] = "←";
   msgA[1] = "\u0020\u0020\u0020";
   numA = 0;
 var tmr1ID;

     function blinkmsg1(){ //ボタンのラベル(文字)を点滅させます。
           document.getElementById("mybotan1").disabled=true;
           document.getElementById("mybotan2").disabled=false;
           document.getElementById("mybotan2").value ="→";
           clearTimeout(tmr2ID);
           document.getElementById("mybotan1").value = msgA[numA];
           numA ^= 1;
           tmr1ID = setTimeout('blinkmsg1()',1000);
           document.getElementById("mybotan1").style.color="red";
           document.getElementById("mybotan2").style.color="white";
           myMarquee.direction='left';
           document.getElementById("myMarquee").start();
        }

   msgB = new Array();
   msgB[0] = "→";
   msgB[1] = "\u0020\u0020\u0020";
   numB = 0;
 var tmr2ID;

     function blinkmsg2(){ //ボタンのラベル(文字)を点滅させます。
           document.getElementById("mybotan1").disabled=false;
           document.getElementById("mybotan2").disabled=true;
           document.getElementById("mybotan1").value ="←";
           clearTimeout(tmr1ID);
           document.getElementById("mybotan2").value = msgB[numB];
           numB ^= 1;
           tmr2ID = setTimeout('blinkmsg2()',1000);
           document.getElementById("mybotan1").style.color="white";
           document.getElementById("mybotan2").style.color="red";
           myMarquee.direction='right';
           document.getElementById("myMarquee").start();
       }

          function stopMarquee(){
              document.getElementById("mybotan1").disabled=false;
              document.getElementById("mybotan2").disabled=false;
              clearTimeout(tmr1ID);
              clearTimeout(tmr2ID);
              document.getElementById("mybotan1").value ="←";
              document.getElementById("mybotan2").value ="→";
              document.getElementById("mybotan1").style.color="white";
              document.getElementById("mybotan2").style.color="white";
              document.getElementById("myMarquee").stop();
       }
 //-->
 </script>
 </head>

 <body>
   <marquee id="myMarquee">ttttt</marquee>
<br><br>
   <form name="myForm" style="text-align:center;">
    <input name="blinkA" type="button" id="mybotan1" value="←" onclick="blinkmsg1();"
       style="color:white; font-weight:bold; background:black; text-align : center;">
    <input type="button" name="stop" value=" STOP " onClick="stopMarquee()">
    <input name="blinkB"  type="button" id="mybotan2" value="→" onclick="blinkmsg2();"
       style="color:white; font-weight:bold; background:black; text-align : center;">
   </form>

 <script language="JavaScript">
 <!--
  setTimeout('blinkmsg1()',1000);
 //-->
 </script>

   </body>
 </html>
編集 履歴 (4)
ウォッチ

この質問への回答やコメントをメールでお知らせします。