4

我被要求创建一个简单的 png 动画：将鼠标悬停在菜单项上时会出现闪烁，如下所示：http ://www.breathoflifeart.com/wordpress/videos/ 正如您在发布时看到的那样，动画播放正常，但在另一个实例启动时停止（以中等速度将鼠标扫过菜单条目以查看错误）我正在尝试： A.即使在另一个元素被突出显示 或 B

之后也让动画播放. 将 background-position 重置为 0 onmouseout

这是当前的 javascript，根据另一个问题中的示例修改：

var scrollUp = (function () {
var timerId; // stored timer in case you want to use clearInterval later
return function (height, times, element) {
        clearInterval(timerId);
 var i = 0; // a simple counter
 timerId = setInterval(function () {
   if (i > times) // if the last frame is reached, set counter to zero
   {  i = 0;
        clearInterval(timerId);}
        else
      element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
      i++;
    }, 50); // every 50 milliseconds
};
})();

HTML（每个元素都遵循相同的基本模板）

<a href="./for-sale/" onmouseover="scrollUp(42, 9, document.getElementById('sp-58'))">
  For Sale
  <div id="sp-58" class="sparkleparty"></div>
</a>
4

2 回答 2

1

您真正需要的是为每个动画使用单独的timerId -s。这是一个范围和闭包的问题，​​真的。在提供的示例中，timerId对所有scrollUp (...)函数都是全局的。要解决此问题，您可以尝试以下操作：

var scrollUp = function (height, times, element) {
 var i = 0; // a simple counter
 var timerId = setInterval(function () {
  if (i > times) {
   i = 0; clearInterval(timerId);
  } else {
   element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
  }
  i++;
 }, 50); // every 50 milliseconds
};
于 2012-12-25T10:31:01.003 回答
0

为此，我为此创建了一个简单的库。看看：https ://github.com/wolthers/SpriteClip.js

于 2013-06-17T07:20:08.970 回答