자바 스크립트 쿼리

Question

나는 Raptorize Jquery 플러그인을 사용 해왔다. 누구도 이미지를 오프셋하여 페이지에서 벗어나고 이동하는 방법을 알고 있는지 궁금해하고 있었다.

당신이 당신은 그냥이 이미지 것을 가정 (부정적 폭으로 설정, "올바른"속성을 사용하여 이미지를 상쇄 할 수

(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

을 도울 수 있기를 바랍니다 (I 자바 스크립트를 작동하는 방법을 단서가 없다) 너비가 있지만 신체에 붙어 있어야한다). 예를 들어

: 나는 작은 샘플 here을 만든

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

3 초를 기다린 후 "랩터는"왼쪽 하단에 화면의 오른쪽 아래에서 도보로 시작합니다.

오디오 지원을 감지하는 더 좋은 방법은 Modernizr을 사용하는 것입니다 (http://modernizr.com/docs/ 참조).