Question

我在Javascript中需要有关动画PNG的帮助。

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

风格：

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

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

使用Javascript动画PNG背景，但没有循环？

2 个答案: