更改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

回答

相关问题