更改window.resize函數 - JS Movie

我使用插件jsMovie在我的頁面上顯示PNG序列。問題是我想切換到一個不同的功能（PNG序列的較小版本），當頁面調整大小在1500以下時。我經歷了很多if/if else選項，但沒有發現任何改變功能，同時調整瀏覽器的大小。這是我到目前爲止有：更改window.resize函數 - JS Movie

$(window).resize(function() { 
if($(this).width() > 1501) { 

    $('.phoneicon').jsMovie({ 
     sequence: 'phoneicon_#####.png', 
     folder : "images/Contact/PhoneIconPNG3/", 
     from: 0, 
     to: 63, 
     height:410, 
     width:551, 
     fps:29.97, 
     repeat:true,    
    }); 

    $('.play').mouseenter(function(){ 
     $('.phoneicon').jsMovie('playClips'); 
    }); 
    $('.play').mouseleave(function(){ 
     $('.phoneicon').jsMovie('stop'); 
    }); 

} 

else { 


    $('.phoneicon').jsMovie({ 
     sequence: 'Phoneiconsmall_#####.png', 
     folder : "images/Contact/PhoneIconPNGSmall/", 
     from: 0, 
     to: 63, 
     height:318, 
     width:420, 
     fps:29.97, 
     repeat:true,    
    }); 

    $('.play').mouseenter(function(){ 
     $('.phoneicon').jsMovie('playClips'); 
    }); 
    $('.play').mouseleave(function(){ 
     $('.phoneicon').jsMovie('stop'); 
    }); 
} 




});

這類作品，但它僅顯示在瀏覽器的大小，而這兩個功能之間沒有動態地改變序列（除非該頁面是物理刷新）。另外，我還沒有找到任何使用CSS定位函數的方法 - jsMovie插件覆蓋任何以PNG的寬度或高度爲目標的CSS。

這裏是一個鏈接jsMovie文檔我一直在使用：http://jsmovie.konsultaner.de/#/

任何指導，將不勝感激！

來源

2014-04-03 Wing

也許試試這個：

var timeout; 

$(window).resize(function() { 
    clearTimeout(timeout); 
    timeout = setTimeout(function() { 
     $('.phoneicon').jsMovie("destroy"); 

     if($(window).width() > 1501) { 

      $('.phoneicon').jsMovie({ 
       sequence: 'phoneicon_#####.png', 
       folder : "images/Contact/PhoneIconPNG3/", 
       from: 0, 
       to: 63, 
       height:410, 
       width:551, 
       fps:29.97, 
       repeat:true,    
      }); 

      $('.play').mouseenter(function(){ 
       $('.phoneicon').jsMovie('playClips'); 
      }); 
      $('.play').mouseleave(function(){ 
       $('.phoneicon').jsMovie('stop'); 
      }); 
     } 
     else { 
      $('.phoneicon').jsMovie({ 
       sequence: 'Phoneiconsmall_#####.png', 
       folder : "images/Contact/PhoneIconPNGSmall/", 
       from: 0, 
       to: 63, 
       height:318, 
       width:420, 
       fps:29.97, 
       repeat:true,    
      }); 

      $('.play').mouseenter(function(){ 
       $('.phoneicon').jsMovie('playClips'); 
      }); 
      $('.play').mouseleave(function(){ 
       $('.phoneicon').jsMovie('stop'); 
      }); 
     } 
    }, 100); 

}).resize();

我添加了一個暫停，使整個代碼不會被解僱每次調整窗口大小時，只有當您調整它，因爲更流暢。

從文檔我相信，銷燬功能將「刪除」電影庫，然後你可以重新應用它。

來源

2014-04-03 18:07:13 Alex

亞歷克斯，謝謝你的幫助！我認爲破壞功能絕對是對此的答案。除了現在這個序列不再出現。在我以前的代碼中，序列只會在窗口大小調整時出現。我不確定如何在頁面加載和調整大小功能時顯示它。 – Wing

此外，當我刪除銷燬功能序列出現在加載，但它仍然只是在頁面被物理刷新時的功能之間改變。 – Wing

它的工作原理！謝謝Alex！我所需要做的只是添加一個文檔就緒函數，其中包含If Else語句以及您的代碼。再次感謝， Chris – Wing

更改window.resize函數 - JS Movie

回答

相關問題