jquery sprite動畫響應

我想用精靈替換兩個圖像的gif動畫。問題是，我正在使用響應式設計。所以當窗口大小改變時，整個「系統」不再工作。 gif是壞的，cpu在吃，但它的尺寸正確。jquery sprite動畫響應

所以我的問題 - 因爲我發現沒有解決方案 - 是有可能從實際窗口獲得窗口大小，將圖像縮放到正確的高度，寬度，當然也會改變從第一圖像到第二圖像的「跳躍」等等。

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？

謝謝！

來源

2013-03-22 ad2003

爲什麼不使用CSS媒體查詢來響應在斷點處的屏幕大小更改？ – 2013-04-09 14:56:17

$(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-26 08:01:08 George

謝謝！我會嘗試。 – ad2003 2013-05-08 21:27:42

我只用CSS做的。如果您的精靈具有（例如）5個圖像，則將背景大小設置爲500％。它爲我工作。 Working example。

來源

2013-06-11 22:33:30 user2476397

結賬LazyLou並保持關注v1.1。我是這個插件的開發人員，我打算在v1.1上添加附加體系結構。插件的第一個插件將是動畫師。

來源

2013-12-21 22:07:47 ozanmuyes

jquery sprite動畫響應

回答

相關問題