1

私はRaptorize Jqueryプラグインを使用しており、画像をオフセットしてページから外して移動する方法を誰かが知っているかどうか疑問に思っていました。(私は Javascript の操作方法がわかりません)

あなたが助けてくれることを願っています

(function($) {

    $.fn.raptorize = function(options) {

        //Yo' defaults
        var defaults = {  
            enterOn: 'click', //timer, konami-code, click
            delayTime: 5000 //time before raptor attacks on timer mode
            };  

        //Extend those options
        var options = $.extend(defaults, options); 

        return this.each(function() {

            var _this = $(this);
            var audioSupported = false;
            //Stupid Browser Checking which should be in jQuery Support
            if ($.browser.mozilla && $.browser.version.substr(0, 5) >= "1.9.2" || $.browser.webkit) { 
                audioSupported = true;
            }

            //Raptor Vars
            var raptorImageMarkup = '<img id="elRaptor" style="display: none" src="raptor.png" />'
            var raptorAudioMarkup = '<audio id="elRaptorShriek" preload="auto"><source src="raptor-sound.mp3" /><source src="raptor-sound.ogg" /></audio>'; 
            var locked = false;

            //Append Raptor and Style
            $('body').append(raptorImageMarkup);
            if(audioSupported) { $('body').append(raptorAudioMarkup); }
            var raptor = $('#elRaptor').css({
                "position":"fixed",
                "bottom": "0px",
                "right" : "0",
                "display" : "block"
            })

            // Animating Code
            function init() {
                locked = true;

                //Sound Hilarity
                if(audioSupported) { 
                    function playSound() {
                        document.getElementById('elRaptorShriek').play();
                    }
                    playSound();
                }

                // Movement Hilarity    
                raptor.animate({
                    "bottom" : "0"
                }, function() {             
                    $(this).animate({
                        "bottom" : "0px"
                    }, 100, function() {
                        var offset = (($(this).position().left)+600);
                        $(this).delay(300).animate({
                            "right" : offset
                        }, 2300, function() {

                            raptor = $('#elRaptor').css({
                                "bottom": "-700px",
                                "right" : "300"
                            })
                            locked = false;
                        })
                    });
                });
            }


            //Determine Entrance
            if(options.enterOn == 'timer') {
                setTimeout(init, options.delayTime);
            } else if(options.enterOn == 'click') {
                _this.bind('click', function(e) {
                    e.preventDefault();
                    if(!locked) {
                        init();
                    }
                })
            } else if(options.enterOn == 'konami-code'){
                var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65";
                $(window).bind("keydown.raptorz", function(e){
                    kkeys.push( e.keyCode );
                    if ( kkeys.toString().indexOf( konami ) >= 0 ) {
                        init();
                        $(window).unbind('keydown.raptorz');
                    }
                }, true);

            }

        });//each call
    }//orbit plugin call
})(jQuery);
4

2 に答える 2

0

「右」プロパティを使用して画像をオフセットできます。負の幅に設定するだけです（これは、画像に幅があることを前提としていますが、本文に追加される必要があります）。

例えば：

 var raptor = $('#elRaptor').css({
                "position":"fixed",
                "bottom": "0px",
                "right" : -$("#elRaptor").width(),
                "display" : "block"
              });

ここに小さなサンプルを作成しました。3 秒待つと、「ラプター」が画面の右下から左下に歩き始めます。

オーディオ サポートを検出するより良い方法は、Modernizr を使用することです。 http://modernizr.com/docs/を参照してください。

于 2012-10-05T15:08:22.540 に答える