1

我正在使用来自jsmovie的插件。它具有基本用法，例如

$('.movie').jsMovie({
   images : ['loader_ani4x4.png'],
   folder : 'pic/loader/',
   height : 40, width: 40,
   grid   : {height:40, width:40, columns:4, rows:4},
   showPreLoader : false,
   playOnLoad    : true
});

和像这样的事件

 *  play    -   is triggered when the movie starts playing
 *  pause   -   is triggered when the movie pauses
 *  stop    -   is triggered when the movie stops
 *  ended   -   is triggered when a clip played its last frame
 *  playing -   is triggered when the movie enters a frame
 *  loaded  -   is triggered when the movie has finished its loading process
 *  verbose -   is triggered when the movie outputs a verbose, the callback has an extra argument like function(e,output){} which contains the text

我如何使用播放事件？

我试过这样但不起作用

 $('#movie').jsMovie.playing(function(v){
    console.log();
});
4

5 回答 5

3

试试看：

$('#movie').on('playing',function(){ /* your code */});
于 2013-07-05T14:27:44.497 回答
1

从“触发器”这个词我假设这个库正在触发 dom 对象上的事件。我不确定，但可能你可以使用这个：

$('#movie').on('playing', function() { ... });
于 2013-07-05T14:28:01.687 回答
1

检查源文件，我发现里面有一个play_movie_event函数，它是播放电影的函数（逐帧）。它看起来像这样：

function play_movie_event(e, fromFrame, toFrame, repeat, performStop){

    if(fromFrame === undefined || fromFrame < 1){
        fromFrame = 1;
    }

    if(toFrame === undefined || toFrame > $(this).data("settings").images.length*$(this).data("settings").grid.rows*$(this).data("settings").grid.columns){
        toFrame = $(this).data("settings").images.length*$(this).data("settings").grid.rows*$(this).data("settings").grid.columns;
    }

    if(repeat === undefined){
        repeat = $(this).data("settings").repeat
    }

    if(performStop === undefined){
        performStop = true;
    }

    if($(this).data("currentStatus") == 'play'){
        clearInterval($(this).data("playingInterval"));
        $(this).data("currentStatus","playing");
        var self=this;
        $(this).data("playingInterval",setInterval(function() {
            // FPS Measurement
            if($(self).data("realFpsTimeStamp") != undefined){
                $(self).data("realFps",1/(((new Date()).getTime()-$(self).data("realFpsTimeStamp"))/1000));
                //verboseOut.apply($(self),[$(self).data("realFps").toFixed(2)+"fps"]);
            }else{
                $(self).data("realFps",$(self).data("settings").fps);
            }
            $(self).data("realFpsTimeStamp",(new Date()).getTime());

            // play frames
            if($(self).data("settings").playBackwards){
                if($(self).data("currentFrame").data('frame') == fromFrame && !repeat){
                    if(performStop){
                        $(self).trigger('stop');
                    }else{
                        $(self).trigger('pause');
                    }
                    $(self).trigger('ended');
                }else{
                    $(self).trigger('playing');
                    if($(self).data("currentFrame").data('frame') != fromFrame){
                        methods.previousFrame.apply($(self));
                    }else{
                        methods.gotoFrame.apply($(self),[toFrame]);
                    }
                }
            }else{
                if($(self).data("currentFrame").data('frame') == toFrame && !repeat){
                    if(performStop){
                        $(self).trigger('stop');
                    }else{
                        $(self).trigger('pause');
                    }
                    $(self).trigger('ended');
                }else{
                    $(self).trigger('playing');
                    if($(self).data("currentFrame").data('frame') != toFrame){
                        methods.nextFrame.apply($(self));
                    }else{
                        methods.gotoFrame.apply($(self),[fromFrame]);
                    }
                }
            }

        }, 1000/$(this).data("settings").fps));
    }
}

你可能不在乎它是如何工作的，但重要的是像这样的行：

if($(self).data("currentFrame").data('frame') == toFrame && !repeat){
    if(performStop){
        $(self).trigger('stop');
    }else{
        $(self).trigger('pause');
    }
        $(self).trigger('ended');
}

你可以看到所有这些触发器。它们被放置在文档中的任何地方。这意味着使用它们的好方法是.on()

$('#movie').on('stop', function(){})

检查 jQuery 文档以了解其.trigger()作用：http ://api.jquery.com/trigger/

于 2013-07-05T14:39:02.830 回答
0

我不知道这个插件，但通常你可以在初始化时附加到一个事件

$('.movie').jsMovie({
   images : ['loader_ani4x4.png'],
   folder : 'pic/loader/',
   height : 40, width: 40,
   grid   : {height:40, width:40, columns:4, rows:4},
   showPreLoader : false,
   playOnLoad    : true,
   //events
   playing: function(v){
        console.log();
   };
});

或者你可以使用jQuery.on 方法：

$('#movie').on('playing',function(){ console.log(); });
于 2013-07-05T14:28:59.987 回答
0

从源代码：

$(this).trigger("play",[fromFrame,toFrame,repeat,performStop]);

在第 249 行调用。this在这种情况下是 DOM 元素，从插件注册可以看出：

$.fn.jsMovie = function(method) {
    //snip...
    } else if ( typeof method === 'object' || ! method ) {
        return methods.init.apply(this, arguments );
    //snip...
};

jsMovie 插件本身似乎监听了它自己的一些事件：

$(this).bind("play",play_movie_event);
$(this).bind("stop",stop_movie_event);
$(this).bind("pause",pause_movie_event);

所以你可以按照他们自己的例子。最后，您应该听这样的事件（正如其他人所建议的那样）：

$('#movie').on('play',function(event,fromFrame,toFrame,repeat,performStop) {
    // event handler function
});
于 2013-07-05T14:42:02.137 回答