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

您可以使用“right”属性偏移图像，只需将其设置为负宽度（这假定图像具有宽度，但它应该附加到正文中）。

例如：

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

我在这里创建了一个小样本，等待三秒钟，“猛禽”开始从屏幕的右下角走到左下角。

检测音频支持的更好方法是使用 Modernizr，请参阅http://modernizr.com/docs/。

于 2012-10-05T15:08:22.540 回答
0

看起来您的代码与原始插件版本有点不同。这种差异导致猛禽从页面上开始，而不是隐藏在视图之外。

将cssbottom属性从 0px 更新为 -700px：

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

旁注：自原始 raptorize 插件发布（2010 年）以来已经有很长时间了，并且它停止与较新的 jQuery 版本一起使用。有一个更新的实现 ( https://github.com/randomvlad/raptorize-jquery ) 支持 jQuery 版本 1.7+、2.x 和 3.x 以及一些额外的改进。

免责声明：我是更新后的 raptorize 2.0 插件的“作者”，该插件本身基于 ZURB 的原始插件（https://zurb.com/playground/jquery-raptorize）。

于 2021-12-22T20:31:11.333 回答