Question

我正在使用来自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();
});

Answer 1

试试：

$('#movie').on('playing',function(){ /* your code */});

Answer 2

从'trigger'这个词我假设这个库在dom对象上触发事件。我不确定，但可能你可以使用它：

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

Answer 3

检查源文件，我在函数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/

Answer 4

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

$('.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 method：

$('#movie').on('playing',function(){ console.log(); });

Answer 5

来自源代码：

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

jquery事件处理如何使用

5 个答案: