如何让我的箭头小部件在第二次单击时向后旋转以开始

How do I get my arrow widget to rotate back to start on second click

本文关键字：单击旋转开始第二次我的小部更新时间：2023-09-26

在看了两节YouTube课程后，我现在有一个漂亮的箭头小部件，可以通过一个按钮淡入，旋转到180度并淡出控制。我不知道如何在第二次单击此按钮时使箭头旋转回 0。

可能不是最优雅的代码，但我们在这里：

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Fade In and Out</title>
    <style type="text/css">
    div.contentbox {
        width: 50px;
        height: 50px;
        padding: 20px;
        opacity: 0;
    }
    </style>
    <script type="text/javascript">
    var fade_in_from = 0;
    var fade_out_from = 10;
    function fadeIn(element) {
    var target = document.getElementById(element)
    target.style.display = "block";
    var newSetting = fade_in_from / 10;
    target.style.opacity = newSetting;
    fade_in_from++;
    if(fade_in_from == 10) {
        target.style.opacity = 1;
        clearTimeout(loopTimer);
        fade_in_from = 0;
        return false;
    }
    var loopTimer = setTimeout('fadeIn('''+element+''')', 50);
    }
    function fadeOut(element) {
    var target = document.getElementById(element)
    var newSetting = fade_out_from / 10;
    target.style.opacity = newSetting;
    fade_out_from--;
    if(fade_out_from == 0) {
        target.style.opacity = 0;
        clearTimeout(loopTimer);
        fade_out_from = 10;
        return false;
    }
    var loopTimer = setTimeout('fadeOut('''+element+''')', 50); 
    }

    var looper;
    var degrees = 0;
    function rotateAnimation(el,speed)
    {
        var elem = document.getElementById(el);
        if(navigator.userAgent.match("Chrome")){
            elem.style.WebkitTransform = "rotate("+degrees+"deg)";
        }   else    if(navigator.userAgent.match("Firefox")){
            elem.style.MozTransform = "rotate("+degrees+"deg)";
        }   else    if(navigator.userAgent.match("MSIE")){
            elem.style.msTransform = "rotate("+degrees+"deg)";
        }   else    if(navigator.userAgent.match("Opera")){
            elem.style.OTransform = "rotate("+degrees+"deg)";
        } else {
                    elem.style.transform = "rotate("+degrees+"deg)";
        }
        looper = setTimeout ('rotateAnimation('''+el+''','+speed+')',speed);
        degrees++;
        if(degrees > 179){
            clearTimeout(looper)
            }
    }

    </script>
    </head>
    <body>
    <button onmouseover="fadeIn('arrow_box')": onmouseout="fadeOut('arrow_box')":  onclick="rotateAnimation('arrow',5)">fade in/out</button>
    <div id="arrow_box" class="contentbox"><img id="arrow" img src="images/Arrow.png" width="50" height="50" alt="Arrow" /></div>

    </body>
    </html>

请帮忙。

创建一个新变量来记住方向，然后根据要去的方向递增或递减度数。

这是一个工作解决方案的 JSfiddle 链接。

var looper;
var degrees = 0;
var direction = 0;
function rotateAnimation(el,speed){
  var elem = document.getElementById(el);
  if(navigator.userAgent.match("Chrome")){
    elem.style.WebkitTransform = "rotate("+degrees+"deg)";
  }else    if(navigator.userAgent.match("Firefox")){
    elem.style.MozTransform = "rotate("+degrees+"deg)";
  }else    if(navigator.userAgent.match("MSIE")){
    elem.style.msTransform = "rotate("+degrees+"deg)";
  }else    if(navigator.userAgent.match("Opera")){
    elem.style.OTransform = "rotate("+degrees+"deg)";
  }else {
    elem.style.transform = "rotate("+degrees+"deg)";
  }
  looper = setTimeout
  ('rotateAnimation('''+el+''','+speed+')',speed);
  if(direction === 0){
    degrees++;
    if(degrees > 179){
        direction = 1;
        clearTimeout(looper);
    }
  }else {
    degrees--;  
    if(degrees < 1){
        direction = 0;
        clearTimeout(looper);
    }
  }
}