Question

在完成两个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>

请帮忙。

Answer 1

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

以下是工作解决方案的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);
    }
  }
}

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

1 个答案: