简单模拟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);
      }
    };
  };

学习了！羡慕你的时间啊。静下心来，写写程序多好！

我的SB领导怎么就是不理解呢？？

我是拖 

爱卿平身！

   为了回这贴  竟然做了5分钟 回帖测验，，楼主头像魅力不错

我的头像也很有魅力

不错，简单的模仿，已经大概出效果了
不过JS我写起来有点纠结啊

做的不错，蛮搞笑的。  

额 楼主不错哦。看看效果再说。

效果倒是没“简单”，小鸡眨眼、张嘴之类的所有效果都做了，只是把事件绑定方式简化了很多。