Question

我的网站上有以下代码....

此刻，当点击“测试1”时，动画开始。之后，当单击“测试2”或“测试3”时，动画不会重新启动...

点击任何链接后如何重新启动动画？

点击链接后，是否可以淡出和淡入？

HTML标记：

<div id="anim"></div>

</br>
</br>

<li id="item1"><span></span><a href="#">Test 1</a></li>
<li id="item2"><span></span><a href="#">Test 2</a></li>
<li id="item3"><span></span><a href="#">Test 3</a></li>

CSS：

#anim {
  width: 14px; height: 14px;
  background-image: url(http://mail.google.com/mail/im/emotisprites/wink2.png);
  background-repeat: no-repeat; 
}

使用Javascript：

var scrollUp = (function () {
    var timerId, height, times ,i = 0 , element; 

    return {
        stop : function(){
            clearInterval( timerId );
        },
        init :function( h, t, el ){
            height = h;
            times = t;
            element =el ;
        },
        start : function ( ) {
            timerId = setInterval(function () {
              if (i > times) // if the last frame is reached, set counter to zero
                clearInterval(timerId);
              element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
              i++;
            }, 100); // every 100 milliseconds
          }
    };
})();

scrollUp.init(14, 40, document.getElementById('anim'));

// start animation:
document.getElementById('item1').addEventListener('click', function(){
    scrollUp.start();
}, false );

这是一个小提琴：http://jsfiddle.net/ctF4t/3/

Answer 1

据我了解，如果点击其中一个按钮，您想要重新启动动画（无论当前状态如何）？

好吧，如果是这样，首先你应该在stop之前每次都调用start函数：

document.getElementById('item1').addEventListener('click', function(){
    scrollUp.stop();
    scrollUp.start();
}, false );

此外，必须在stop：

中重置索引

stop : function(){
    clearInterval( timerId );
    i = 0;
},

这将完成按钮#item1的工作。 Here is a demo.将此应用于其他人不应该是现在的大问题。例如，将事件绑定到<body/>并读取目标：

function startAnimation(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    target = target.parentNode;

    if (!target.id.match(/item[0-3]/)) {
        return e;
    }

    scrollUp.stop();
    scrollUp.start();
}

document.body.addEventListener('click',startAnimation,false);

Here is the complete demo.

Answer 2

如果点击任何链接，我将如何重新启动动画？

要定义restart，您需要stop任何仍在运行的时间间隔，将i重置为0，因为这标志着“开始< / em>，“和start新的间隔：

return { // ... restart: function () { this.stop(); i = 0; this.start(); } };

然后，您需要绑定到每个li，以便他们都可以执行restart()：

var items = document.querySelectorAll('#item1, #item2, #item3'); for (var i = 0, l = items.length; i < l; i++) { items[i].addEventListener('click', function () { scrollUp.restart(); }, false); }

Answer 3

我改变了你的小提琴：http://jsfiddle.net/M5pe8/1/

似乎你没有重置“i”var，所以动画无法从头开始重启（即从“零”开始）;我离开警戒线（但被注释掉了），告诉你我是如何得出结论的：

          if (i > times) // if the last frame is reached, set counter to zero
          {
              //alert(i + ' > ' + times);
              clearInterval(timerId);
              i = 0;
          }
          else
          {
              element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
              i++;
          }

当然，我添加了一些行来将启动动画的click事件绑定到另外两个链接（仅为了完整性）。现在，单击第二次动画重新启动。这就是你需要的吗？

编辑：链接到小提琴更正

重启/刷新Javascript函数或计时器

3 个答案: