Question

我正在使用插件jsMovie在我的页面上显示PNG序列。问题是，当页面调整到1500以下时，我想切换到不同的功能（PNG序列的较小版本）。我已经通过了很多if / if else选项，但没有发现任何改变了调整浏览器大小时的功能。这是我到目前为止所做的：

$(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/#/

非常感谢任何指导！

Answer 1

也许试试这个：

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();

我已经添加了一个超时，这样每次调整窗口大小时都不会触发整个代码，只有在你调整窗口大小时才会触发它。

来自文档我相信destroy函数将“删除”电影库，然后你可以重新应用它。

更改window.resize上的函数 - JS电影

1 个答案: