Question

我想用精灵替换两个图像gif动画。问题是，我正在使用响应式设计。因此，当窗口大小改变时，整个“系统”不再起作用。 gif很糟糕，cpu正在吃，但它可以缩放。

所以我的问题 - 因为我找不到解决方案 - 是否可以从实际窗口获取窗口大小，将图像缩放到正确的高度，宽度，当然也会改变从第1张图像到第2张图像的“跳跃”等等。

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是错误的 - 它应该是实际的显示尺寸 - 同时，图像应缩放到该大小。

这样的事情可能吗？或者有没有人更好地了解eays响应精灵动画？

也许是css3？

谢谢！

AD

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.
}

Answer 2

我只用CSS做过。如果您的精灵有（例如）5张图像，则将背景大小设置为500％。它对我有用。 Working example

Answer 3

查看LazyLou并继续关注v1.1。我是这个插件的开发者，我打算在v1.1上添加附加架构。该插件的第一个插件将是动画师。

jquery精灵动画响应

3 个答案: