Google感謝祭の大雄鶏Doodleを簡単にシミュレート

1897 ワード

金曜日は暇で、jQueryでGoogleの雄鶏を簡単にシミュレートして、基本的な効果はすべて実現しましたが、構想は保証できません.
また、Googleはマウスのイベントをより細かくするために、いくつかのdivを使って処理しましたが、私は手間を省くために雄鶏の各部位で直接処理しました.そのため、クリック事件の精細さは彼よりはるかに優れていない.
 
<div id="cock">
    <div id="face"></div>
    <div id="head"></div>
    <div id="plumage1"></div>
    <div id="plumage2"></div>
    <div id="plumage3"></div>
    <div id="plumage4"></div>
    <div id="wing"></div>
    <div id="foot"></div>
    <div id="link"></div>
</div>

前述したように、雄鶏はこの簡単な構造しか使いませんでした.
スクリーンショットはしません.
 
  //       
  var changeStyle = function($this, type, maxNum){
    var i = 0;
    $this.one('click', function(){
      //           ~
      clearInterval(autoPlumageShake);
    }).bind('click', function(){
      $(this).css('background-position', type[++i]);
      if(i==maxNum){i=0}
    });
  };
  //       
  var mouthShake = function(){
    setTimeout(function(){
      $('#face').css({'background-position': '-80px -457px'});
    }, 400);
    setTimeout(function(){
      $('#face').css({'background-position': '0 -457px'});
    }, 600);
    setTimeout(function(){
      wingClick();
    }, 610);
  };
  //       
  var wingShake = function(num){
    $('#wing').css({'background-position': Cock.wing[13-num]});
    return function(){
      if(num--){
        setTimeout(wingShake(num), 60);
      }
    };
  };