0

我正在使用插件 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 Docs 的链接：http: //jsmovie.konsultaner.de/#/

任何指导将不胜感激！

4

1 回答 1

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函数会“删除”电影库，然后你可以重新应用它。

于 2014-04-03T18:07:13.770 回答