百度春節(jié)舞龍logo，鼠標(biāo)跟隨特效詳解，附html+js壓縮包

在2012年的新年除夕夜來臨之際， 百度上線了2012年的春節(jié)Logo，這次的Logo不同以往，既不是靜態(tài)的Logo，也不是以前的GIF動(dòng)態(tài)圖片。今年的春節(jié)Logo，百度用藍(lán)色的龍作為了主視覺，感覺十分的霸氣，當(dāng)用戶在百度首頁用鼠標(biāo)懸停在百度2012年的春節(jié)Logo上時(shí)，藍(lán)色的巨龍將會(huì)從Logo上飛出，隨著鼠標(biāo)的移動(dòng)而舞動(dòng)。

點(diǎn)擊預(yù)覽效果

       據(jù)了解，這次的Logo是百度在Logo上的又一次嘗試，為了兼容在中國實(shí)用較多的一些老舊版本的瀏覽器，讓大家都能看到這炫彩的Logo。這次的Logo沒有完全采用HTML5的技術(shù)，對于老舊瀏覽器傳統(tǒng)的JS的技術(shù)也使得這個(gè)Logo可以較為完美的被呈現(xiàn)。

在這里我們對百度今年的Logo做一下技術(shù)分解：

一、百度對于靜止?fàn)顟B(tài)和懸停狀態(tài)分別有兩種Logo，用以展示出龍騰空前和騰空后出Logo后的不同狀態(tài)。

（騰龍前的靜態(tài)Logo）

（騰龍后的靜態(tài)Logo）

二、在騰空飛出后的龍是由多個(gè)部分組成，因此，這個(gè)看起來是整體的龍實(shí)際上也依賴于多個(gè)部分，而且每個(gè)部分都非常的精巧。

（龍頭）

（龍身）

（龍足）

（龍尾）

（龍尾羽）

三、JS代碼控制了整個(gè)龍的動(dòng)作，包括它的如下動(dòng)作：跟隨鼠標(biāo)、鼠標(biāo)靜止時(shí)抖動(dòng)全身、由右側(cè)直接飛回Logo（或自左側(cè)折疊后自右側(cè)飛回、或自上而下呈萬字飛回）。在這個(gè)控制的JS中，主要是對龍的各個(gè)部分進(jìn)行了定位、用函數(shù)特別定義了幾種龍的動(dòng)作。更多細(xì)節(jié)，大家可以在下面的代碼中自己研究一下。

下載信息  [文件大小：62.56 KB 下載次數(shù)： 次]

點(diǎn)擊下載文件:baidu_logo_tuquu