带有Javascript的动画PNG背景，但没有循环？

Question

我需要关于 Javascript 动画 PNG 的帮助。

我在 Stack Overflow 上找到了如何使用 Javascript 为 PNG 背景设置动画。但我的问题是我只需要动画onmouseover 和onmouseout。并且动画应该只播放一次，而不是循环播放，所以当用户将鼠标移动到 div 上时，后台的动画应该播放一次并在最后一帧停止，但是当用户离开 @987654324 @，反向动画应该播放一次并在最后（第一）帧停止。我在这里找到的脚本是：

风格：

#anim {
  width: 240px; height: 60px;
  background-image: url(animleft.png);
  background-repeat: no-repeat; 
}

HTML：

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

Javascript：

var scrollUp = (function () {
  var timerId; // stored timer in case you want to use clearInterval later

  return function (height, times, element) {
    var i = 0; // a simple counter
    timerId = setInterval(function () {
      if (i > times) // if the last frame is reached, set counter to zero
        i = 0;
      element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
      i++;
    }, 100); // every 100 milliseconds
  };
})();

// start animation:
scrollUp(14, 42, document.getElementById('anim'))

希望有人能帮帮我，谢谢

Answer 1

要在第一组帧之后停止动画，您确实需要更改 if 条件以不将计数器重置为零，而是清除间隔并阻止它再次发生。

要让它只在您输入元素时播放，您可以将动画函数附加为事件侦听器，并使用插入到 onmouseout 事件中的另一个函数反向播放整个内容。

Answer 2

取决于您的目标浏览器，并且由于您的问题相当模糊，我可以向您推荐两种替代方案：

使用 jQuery animate（所有浏览器，包括对 jquery 的引用）

//Animate to x,y where x and y are final positions

$('#anim').mouseenter(function(e) {
    $(this).animate({background-position: x + 'px ' + y + 'px'}, 4200);
})

//Do same for mouseleave

使用css3 animation（此处使用-webkit 浏览器）

<style>
    @-webkit-keyframes resize {

      100% {
         height: 123px;
      }
    }               

    #anim:hover {       
       -webkit-animation-name: resize;
       -webkit-animation-duration: 4s;
    }

如果您正在进行移动开发或只能选择支持 css3 的浏览器，我会选择选项 2。