本文實例講述了JS實現模擬百度搜索“2012世界末日”網頁地震撕裂效果代碼。分享給大家供大家參考，具體如下：
這是一款JS模擬百度搜索“2012世界末日”網頁地震撕裂效果，本效果是模仿用戶在百度輸入“2012世界末日”后點擊搜索后出來的網頁效果，網頁在震動，像是地震了，而后開始撕裂，然后顯示出相關的文字說明，很酷的效果，希望大家可以學習借鑒。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-mn-2012-shake-style-demo/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>2012世界末日</title><style type="text/css">body{ font-family:微軟雅黑}.home-main{ background:url(images/main_bg.jpg) center 0 no-repeat; width: 940px; height: 295px; margin: 0 auto; padding: 25px 30px 10px; position: relative; color: black; font-size: 14px; line-height: 30px; padding-left: 80px; margin-top: 100px}.home-main .grass { display: block; width: 89px; height: 149px; background: url(images/grass.png) 0 0 no-repeat; position: absolute; left: -17px; top: 30px;}.home-main .t{ font-size: 18px; display: block}</style></head><body><div id="out"> <div class="home-main"> <span class="grass"></span> <span class="t">地球日百科地球 那些美好的生命</span> 過去地球：這里曾經生活著很多獨特而神奇的生命，霸王龍，劍齒虎……它們逐漸被地球所淘汰而消失。<br /> 但是，曾經也有很多美好的生命，渡渡鳥，恐鳥，因為人類的行為而消失；<br /> 我們也苦苦的找尋著白鰭豚、華南虎的身影，它們不見了……<br /> 現在地球：這里仍然生活著美好而靈動的生命，它們多姿而獨特，它們頑強又脆弱。<br /> 熊貓、揚子鱷、樹袋熊、鴨嘴獸、眼鏡猴、懶猴、羊駝、虎鯨……因為它們和我們一起共存，我們才不孤獨！<br /> 未來地球：它的命運，在你我手上。 沙漠化、溫室效應、白色污染、過度放牧、大氣污染、水污染……不要因為這些，讓生命消失。 讓地球上，只剩下人類孤獨的生活著！ </div></div><script type="text/javascript" src="2012.js"></script></body></html>希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
