2

我想用精灵替换两个图像 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 是错误的 - 它应该是实际的显示大小 - 同时，图像应该是缩放到那个大小。

这样的事情可能吗？或者有人对 eays 响应式精灵动画有更好的想法吗？

也许css3？

谢谢！

广告

4

3 回答 3

0 
$(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.
}
于 2013-04-26T08:01:08.730 回答
0

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

于 2013-12-21T22:07:47.253 回答
0

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

于 2013-06-11T22:33:30.377 回答