首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Javascript查询

Javascript查询
EN

Stack Overflow用户
提问于 2012-10-05 22:55:41
回答 2查看 183关注 0票数 0

我一直在使用Raptorize Jquery插件,我想知道是否有人知道如何偏移图像,所以它是从页面开始移动的。(我不知道如何使用Javascript)

希望你能帮上忙

代码语言: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);
EN

回答 2

Stack Overflow用户

发布于 2012-10-05 23:08:23

您可以使用"right“属性来偏移图像,只需将其设置为负宽度(这假设图像具有宽度,但它应该是附加到正文的宽度)。

例如:

代码语言:javascript
复制
 var raptor = $('#elRaptor').css({
                "position":"fixed",
                "bottom": "0px",
                "right" : -$("#elRaptor").width(),
                "display" : "block"
              });

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

检测音频支持的一个更好的方法是使用现代,请参考http://modernizr.com/docs/

票数 0
EN

Stack Overflow用户

发布于 2021-12-22 20:31:11

看起来你的代码和原来的插件版本有点不同。不同之处在于raptor从页面开始,而不是隐藏在视图之外。

将css bottom属性从0px更新为-700px:

代码语言:javascript
复制
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以及一些额外的改进。

免责声明:我是更新的Raptorize2.0插件的“作者”,它本身就是基于ZURB (https://zurb.com/playground/jquery-raptorize)的原始插件。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12748853

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档