简单模拟Google感恩节的大公鸡Doodle

周五比较闲，用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);
      }
    };
  };