Javascript查詢

Question

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

Answer 1

可以抵消使用「正確」的特性，進行圖像，只需將其設定爲負寬度（這個假定圖像儘管有一個寬度，但它應該被附加到身體上）。

例如：

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

我創建了一個小樣本here，等待三秒鐘，「猛禽」開始從屏幕的左下右下走。

檢測音頻支持的更好方法是使用Modernizr，請參閱http://modernizr.com/docs/。