Google感謝祭の大雄鶏Doodleを簡単にシミュレート
1897 ワード
金曜日は暇で、jQueryでGoogleの雄鶏を簡単にシミュレートして、基本的な効果はすべて実現しましたが、構想は保証できません.
また、Googleはマウスのイベントをより細かくするために、いくつかのdivを使って処理しましたが、私は手間を省くために雄鶏の各部位で直接処理しました.そのため、クリック事件の精細さは彼よりはるかに優れていない.
前述したように、雄鶏はこの簡単な構造しか使いませんでした.
スクリーンショットはしません.
また、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);
}
};
};