jquery Sprite 动画响应式

Question

我想用 Sprite 替换两个图像的 gif 动画。 问题是，我正在使用响应式设计。所以当窗口大小改变时，整个“系统”就不再工作了。 gif 很糟糕，并且占用 CPU，但它可以正常缩放。

所以我的问题 - 因为我没有找到解决方案 - 是否可以从实际窗口获取窗口大小，将图像缩放到正确的高度、宽度，当然还可以更改从第一个图像到第二个图像的“跳跃”并且很快。

var scrollUp = (function () {

  var timerId;

  return function (height, times, element) {
    var i = 0;
    timerId = setInterval(function () {
      if (i > times)
        i = 0;
      element.style.backgroundPosition = "0px -" + i * height + 'px';
      i ++;
    }, 100  );
  };
})( );

scrollUp( 1200 ,   6, document.getElementById('anim'))

因此，在这段代码中，图像大小设置为 1200 - 没错，如果显示为 1980x1200，但随着显示的变化，大小 1200 是错误的 - 它应该是实际显示大小 - 同时，图像应缩放至该尺寸。

这样的事情可能吗？或者有人对简单的响应式 Sprite 动画有更好的想法吗？

也许是 CSS3？

谢谢!

广告

Answer 1

$(window).resize(function myAss(){ //when window is resizing it starts
    var wid = $(window).width();
    //or
    var wid = $("#someid").width();
    //or
    var wid = $(".someclass").width();
    $("#yourdiv").css("width",wid*0.5); //your div will be 50% of the received width. do same with the height if you want.
}