Javascript 查询

Posted 2023-05-07

【中文标题】Javascript 查询

【英文标题】：Javascript query

【发布时间】：2012-09-26 18:19:18

【问题描述】：

我一直在使用 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);

【参考方案1】：

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

例如：

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

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

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

【讨论】：

谢谢 strmstn 我会试试这个:)

您好 strmstn，您能举个例子说明您将如何做到这一点吗？我无法让它工作:(

【参考方案2】：

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

将 css bottom 属性从 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) 的原始插件。