4

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

目前，当单击“测试 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/

4

3 回答 3

2

据我了解，如果单击其中一个按钮，您希望动画（无论当前处于何种状态）重新启动？

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

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

此外，必须在以下位置重置索引stop：

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

这将为按钮完成工作#item1。这是一个演示。现在将其应用于其他人应该不是大麻烦。例如将事件绑定到<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);

这是完整的演示。

于 2013-05-05T21:20:51.740 回答
0

我把你的小提琴改成了这样：http: //jsfiddle.net/M5pe8/1/

看来您没有重置“i”变量，因此动画无法从头开始（即从“零”开始）；我离开了警告行（但被注释掉了），向您展示我是如何得出结论的：

          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++;
          }

而且，当然，我添加了将启动动画的单击事件绑定到其他两个链接的行（只是为了完整性）。现在，第二次单击动画重新开始。那是你需要的吗？

编辑：链接到小提琴更正

于 2013-05-05T21:37:39.863 回答
0

单击任何链接时如何重新启动动画？

要定义 a restart，您需要将stop任何仍在运行的间隔重置i为，0因为这标志着“开始”和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);
}
于 2013-05-05T21:27:37.513 回答